*{box-sizing:border-box}body{margin:0;background:#ececea;color:#282a2a;font:14px/1.5 Arial,sans-serif}header{padding:24px 36px;background:#202927;color:#fff}header p{margin:7px 0 0;color:#ccd5d1}h1{font-size:24px;font-weight:500;margin:0}nav{padding:14px 36px;display:flex;align-items:center;gap:19px;flex-wrap:wrap;background:#f6f5f2}nav a{cursor:pointer;color:#283b36;text-decoration:underline;text-underline-offset:4px}nav label,.font-toolbar label{display:inline-flex;gap:7px;align-items:center}select{padding:7px;font:inherit;min-height:42px}.font-toolbar{padding:12px 36px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:#f6f5f2;border-top:1px solid #d2d0ca;border-bottom:1px solid #d2d0ca}.font-toolbar strong{font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin-right:5px}.font-toolbar button{padding:8px 15px;border:1px solid #58675e;background:white;cursor:pointer;font:inherit;min-height:42px}main{display:flex;align-items:flex-start;gap:32px;padding:18px 36px 40px;width:max-content}.panel h2{font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 18px}.stage{position:relative}.viewport{position:absolute;left:0;top:0;transform-origin:top left;background:white}iframe{border:0;display:block;background:white;width:100%;height:100%}.notes{position:absolute;top:0;width:186px}.note{position:absolute;left:22px;width:162px;border-top:2px solid #425b52;padding-top:7px;color:#425b52}.note:before{content:'';position:absolute;right:100%;top:-2px;width:22px;border-top:2px solid #425b52}.note:after{content:'◀';position:absolute;left:-27px;top:-10px;font-size:11px}.note b{font-size:13px}.note small{display:block;font-size:11px;line-height:1.45;margin-top:7px;color:#5e6762}.note em{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;margin-top:7px;font-style:normal;font-weight:bold}.legend{max-width:1400px;font-size:12px;color:#5c625e;padding:0 36px 28px;margin:0}.pill{border-radius:15px;padding:4px 8px;background:#7c3aed;color:white;display:inline-block;font-size:10px}.teal{background:#007f82}

@media(max-width:700px){main{padding:12px 12px 35px;gap:0}.notes{display:none}.panel h2{padding-left:0}}