:root{--ink:#253046;--muted:#79869b;--accent:#6659a5;--line:#dce1ea;--paper:#f1f3f7}*{box-sizing:border-box}body{margin:0;background:var(--paper);font-family:Arial,Helvetica,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #7865bc;outline-offset:4px}[hidden]{display:none!important}.viewer-header{padding:24px 42px;background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:11px}.viewer-brand{font-size:11px;font-weight:700;letter-spacing:1.4px}.viewer-brand span{font-size:8px;font-weight:400;letter-spacing:1px;color:#939bad;margin-left:16px}.viewer-header>a:last-child{font-size:11px;color:#6e618f}.viewer-layout{max-width:1120px;margin:auto;display:grid;grid-template-columns:310px minmax(0,1fr);gap:80px;padding:45px 35px;align-items:start}.viewer-sidebar{position:sticky;top:28px}.overline{font-size:8px;font-weight:600;letter-spacing:1.4px;color:#8b80a4;margin:0 0 18px}h1{font-size:54px;line-height:1;letter-spacing:-2px;font-weight:400;margin:0 0 21px}.viewer-intro{font-size:13px;line-height:1.8;color:#7d8798;margin-bottom:24px}.app-switch{display:flex;gap:6px;border:1px solid #d9dbe4;padding:4px;border-radius:7px;background:#e9eaf1;margin-bottom:25px}.app-switch a{width:50%;text-align:center;padding:10px;font-size:11px;border-radius:4px;color:#8690a3}.app-switch a[aria-current=page]{background:#fff;color:#564f73;box-shadow:0 1px 4px #1b284b09}.screen-list{display:flex;flex-direction:column;gap:5px}.screen-list button{display:flex;align-items:center;gap:14px;border:1px solid transparent;background:none;width:100%;padding:12px 13px;text-align:left;border-radius:7px;font-size:11px;line-height:1.6;color:#7e889c}.screen-list button>span:first-child{font-size:8px;color:#9d94ad;letter-spacing:.8px}.screen-list button[aria-pressed=true]{background:#e5dff1;color:#69538d;border-color:#d8cfe7}.screen-list button:hover{background:#e8e5ef}.viewer-settings{margin-top:28px;border-top:1px solid #d7dce6;padding-top:22px}.highlight-toggle{font-size:11px;display:flex;align-items:center;gap:9px;color:#6b7489}.highlight-toggle input{accent-color:#77639f;width:14px;height:14px;margin:0}.viewer-settings p{font-size:10px;line-height:1.9;color:#8a93a6;margin:17px 0}.viewer-settings a{font-size:10px;color:#7d679d;text-decoration:underline;text-underline-offset:4px}.screen-area{min-width:0}.screen-area-header{display:flex;justify-content:space-between;align-items:center;gap:20px;max-width:390px;margin:0 auto 20px}.screen-area-header .overline{font-size:7px;margin-bottom:9px}.screen-area-header h2{font-size:19px;line-height:1.25;letter-spacing:-.5px;margin:0;font-weight:500}.reset-button{background:none;border:1px solid #d0d6e2;border-radius:20px;padding:8px 12px;font-size:9px;color:#8a7d9e}.screen-stage{width:min(100%,390px);position:relative;margin:auto;background:#fff;border:1px solid #d9dce5;border-radius:23px;box-shadow:0 18px 45px #25345015;overflow:hidden}.screen-stage>img{display:block;width:100%;height:auto}.hotspot-layer{position:absolute;inset:0;pointer-events:none}.hotspot{position:absolute;pointer-events:auto;border:1px solid transparent;background:transparent;border-radius:10px;padding:0;display:block;transition:background .15s,border .15s}.screen-stage[data-highlight=true] .hotspot{border:1px dashed #8570ae99;background:#9273c30a}.hotspot:hover,.screen-stage[data-highlight=true] .hotspot:hover{background:#9672c42e;border:1px solid #7c54b0}.hotspot:focus-visible{outline:3px solid #7953ab;outline-offset:-3px;background:#9c74ce2e}.hotspot>span{position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);font-size:8px;white-space:nowrap;background:#49395f;color:#fff;padding:6px 9px;border-radius:5px;opacity:0;pointer-events:none}.hotspot:hover>span,.hotspot:focus-visible>span{opacity:1}.screen-description{max-width:390px;margin:18px auto 0;font-size:11px;line-height:1.9;color:#7c8a9f}.viewer-footer{text-align:center;border-top:1px solid var(--line);padding:22px;font-size:9px;line-height:1.8;color:#9b91ab;background:#fff}
@media(max-width:800px){.viewer-layout{grid-template-columns:240px minmax(0,1fr);gap:32px;padding-inline:25px}.viewer-header{padding-inline:25px}.viewer-brand span{display:none}h1{font-size:45px}}
@media(max-width:600px){.viewer-header{padding:19px 20px;gap:15px}.viewer-brand{font-size:10px;letter-spacing:1px}.viewer-header>a:last-child{font-size:10px}.viewer-layout{display:block;padding:25px 20px}.viewer-sidebar{position:static}.overline{font-size:7px;margin-bottom:13px}h1{font-size:40px;margin-bottom:15px}.viewer-intro{font-size:12px;max-width:370px;margin-bottom:18px}.app-switch{max-width:300px;margin-bottom:17px}.screen-list{display:flex;flex-direction:row;gap:6px;overflow-x:auto;padding:2px 1px 10px;scroll-snap-type:x proximity}.screen-list button{width:auto;flex-shrink:0;white-space:nowrap;border:1px solid #d9dce5;font-size:10px;padding:9px 12px;gap:9px;scroll-snap-align:start}.viewer-settings{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;padding-block:16px;margin-top:8px}.viewer-settings p{width:100%;order:3;margin:0;font-size:9px;line-height:1.7}.highlight-toggle{font-size:10px}.viewer-settings a{font-size:9px}.screen-area{margin-top:17px}.screen-area-header h2{font-size:18px}.screen-stage{max-width:390px;border-radius:20px}.screen-description{font-size:11px}.viewer-footer{font-size:8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}