:root{--ink:#172032;--muted:#6c7588;--line:#dfe3ea;--paper:#fff;--wash:#f3f5f8;--navy:#111a2c;--teal:#20b99d;--amber:#f2a93b;--violet:#8b70e8;--shadow:0 20px 48px rgba(25,35,52,.12)}
[hidden]{display:none!important}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;color:var(--ink);background:var(--wash);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;overflow:hidden}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}.topbar{height:72px;background:var(--navy);color:#fff;display:grid;grid-template-columns:260px 1fr auto;align-items:center;padding:0 22px;border-bottom:1px solid #2b354a;position:relative;z-index:10}.brand{display:flex;align-items:center;gap:11px;font-weight:750;letter-spacing:-.02em;font-size:1.05rem}.brand-mark{width:30px;height:30px;position:relative;display:inline-block}.brand-mark span{position:absolute;border-radius:50%;width:8px;height:8px}.brand-mark span:nth-child(1){background:var(--teal);top:2px;left:2px}.brand-mark span:nth-child(2){background:var(--amber);top:11px;left:11px}.brand-mark span:nth-child(3){background:#fff;right:2px;bottom:2px}.brand-mark:before,.brand-mark:after{content:"";position:absolute;height:2px;background:#526077;transform:rotate(45deg);transform-origin:left center}.brand-mark:before{width:14px;top:7px;left:7px}.brand-mark:after{width:14px;top:16px;left:16px}.project-title{text-align:center}.project-title .eyebrow{display:block;color:#8490a5;font-size:.68rem;letter-spacing:.17em;margin-bottom:2px}.project-title input{border:0;background:transparent;color:#fff;text-align:center;font-weight:650;width:min(330px,35vw);padding:2px 8px;border-radius:6px}.project-title input:focus{outline:1px solid #56637b;background:#1b263a}.saved{display:none}.top-actions{display:flex;align-items:center;gap:12px}.button{border:0;border-radius:8px;padding:9px 14px;font-weight:650;font-size:.875rem;transition:.2s ease}.button.ghost{background:transparent;color:#b8c0ce;border:1px solid #3b465a}.button.ghost:hover{color:#fff;border-color:#657187}.button.secondary{background:#fff;border:1px solid var(--line)}.button.primary{background:var(--navy);color:#fff;box-shadow:0 5px 14px rgba(17,26,44,.16)}.button.primary.drawing{background:var(--teal);color:#071713}.mode-switch{display:flex;background:#202b40;border-radius:9px;padding:4px}.mode-switch button{border:0;background:transparent;color:#929daf;border-radius:6px;padding:7px 13px;font-size:.82rem}.mode-switch button.active{background:#fff;color:var(--navy);font-weight:700}.workspace{height:calc(100vh - 72px);display:grid;grid-template-columns:260px 1fr}.panel{background:var(--paper);border-right:1px solid var(--line)}.sidebar{padding:25px 16px;overflow-y:auto}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:0 7px 13px}.panel-heading.compact{padding:0 0 12px}.eyebrow{font-size:.7rem;font-weight:750;letter-spacing:.14em;color:#8a93a4}.panel-heading h2{font-size:1.05rem;margin:3px 0 0}.icon-button{width:35px;height:35px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:1.3rem;line-height:1}.icon-button:hover{border-color:#9aa4b4}.icon-button.small{width:30px;height:30px}.screen-list{display:flex;flex-direction:column;gap:5px}.screen-item{display:grid;grid-template-columns:42px 1fr 20px;gap:10px;align-items:center;border:1px solid transparent;background:transparent;border-radius:10px;padding:7px;text-align:left;width:100%}.screen-item:hover{background:#f6f7f9}.screen-item.active{background:#eef1f5;border-color:#dfe4eb}.screen-thumb{height:42px;border-radius:6px;background:#dbe1e9;border:3px solid #fff;box-shadow:0 0 0 1px #d6dbe3;display:grid;place-items:center;color:#8993a4;font-weight:800;font-size:.68rem;overflow:hidden}.screen-item.active .screen-thumb{box-shadow:0 0 0 2px var(--teal)}.screen-meta strong{display:block;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.screen-meta small{color:#929aaa;font-size:.7rem}.screen-arrow{color:#9ca4b1}.add-screen-row,.text-action{width:100%;border:0;background:transparent;color:#697487;padding:12px 9px;text-align:left;font-size:.82rem}.add-screen-row span{font-size:1.1rem;margin-right:9px}.add-screen-row:hover,.text-action:hover{color:var(--ink)}.path-section{margin-top:30px;padding:24px 7px 0;border-top:1px solid var(--line)}.path-list{display:flex;flex-direction:column;gap:5px}.path-item{display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:8px 3px;font-size:.82rem;width:100%;text-align:left}.path-item.active{font-weight:700}.path-dot{width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 3px color-mix(in srgb,var(--path-color) 18%,transparent)}.path-count{margin-left:auto;color:#9aa2b0;font-size:.7rem}.text-action{margin-top:18px;border-top:1px solid var(--line);padding-top:18px}.stage-wrap{min-width:0;display:flex;flex-direction:column}.stage-toolbar{height:66px;flex:0 0 66px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px}.breadcrumbs{font-size:.82rem;color:#8a93a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.breadcrumbs b{margin:0 9px;color:#c4c9d2}.breadcrumbs strong{color:var(--ink)}.toolbar-actions,.player-controls{display:flex;align-items:center;gap:10px}.select-wrap{display:flex;align-items:center;gap:7px;font-size:.77rem;color:#7c8595}.select-wrap select{border:1px solid var(--line);border-radius:8px;padding:8px 28px 8px 10px;background:#fff}.stage{display:grid;grid-template-columns:minmax(420px,1fr) 350px;min-height:0;flex:1}.device-area{min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px;overflow:auto;background-image:linear-gradient(#e9ecf1 1px,transparent 1px),linear-gradient(90deg,#e9ecf1 1px,transparent 1px);background-size:24px 24px}.device-shell{position:relative;background:#111823;border:9px solid #111823;box-shadow:var(--shadow);transition:width .28s ease,height .28s ease,border-radius .28s ease;flex:0 0 auto}.device-shell.phone{height:min(68vh,700px);aspect-ratio:9/19.5;border-radius:34px}.device-shell.tablet{width:min(58vw,720px);aspect-ratio:4/3;border-radius:22px}.device-shell.desktop{width:min(62vw,820px);aspect-ratio:16/9;border-radius:14px}.device-shell.classic{width:min(58vw,720px);aspect-ratio:4/3;border-radius:14px}.device-camera{position:absolute;z-index:5;top:7px;left:50%;transform:translateX(-50%);width:33%;height:20px;background:#111823;border-radius:0 0 13px 13px;display:none}.device-shell.phone .device-camera{display:block}.screen-canvas{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:#e8edf3;user-select:none}.screen-canvas img{width:100%;height:100%;object-fit:contain;background:#111}.mock-screen{width:100%;height:100%;background:#f6f8fa;display:flex;flex-direction:column}.mock-top{height:10%;min-height:48px;background:#fff;border-bottom:1px solid #e3e7ed;display:flex;align-items:center;padding:0 7%;gap:8%;font-size:clamp(7px,1.1vw,13px)}.mock-logo{width:24px;height:24px;border-radius:8px;background:var(--navy);display:grid;place-items:center;color:#fff;font-weight:900}.mock-title{font-weight:800;font-size:1.25em}.mock-avatar{margin-left:auto;width:24px;height:24px;background:#f0b75a;border-radius:50%}.mock-body{padding:9% 7%;flex:1}.mock-body h3{margin:0 0 5%;font-size:clamp(12px,2vw,25px)}.mock-sub{height:8px;width:57%;background:#c8d0dc;border-radius:9px;margin-bottom:9%}.mock-card{background:#fff;border:1px solid #e0e4ea;border-radius:12px;padding:6%;margin-bottom:5%;box-shadow:0 4px 12px rgba(29,42,61,.05)}.mock-card-head{display:flex;align-items:center;gap:8%;font-weight:750;font-size:clamp(8px,1.1vw,14px)}.mock-icon{width:32px;height:32px;border-radius:9px;background:#d5f2ed}.mock-button{margin-left:auto;background:var(--navy);color:#fff;border-radius:6px;padding:6px 9px;font-size:.8em}.mock-lines{display:grid;gap:7px;margin-top:12px}.mock-lines i{height:5px;border-radius:8px;background:#e5e9ee}.mock-lines i:nth-child(2){width:72%}.mock-search{height:10%;background:#fff;border:1px solid #dfe3e8;border-radius:9px;display:flex;align-items:center;padding:0 5%;color:#9aa3af;font-size:.8em}.mock-success{margin:28% auto 0;text-align:center}.mock-success .check{width:64px;height:64px;border-radius:50%;background:#d8f4ee;color:var(--teal);display:grid;place-items:center;font-size:2rem;margin:0 auto 16px}.mock-success h3{font-size:1.35em}.hotspot-layer{position:absolute;inset:0;z-index:4}.hotspot{position:absolute;border:2px solid var(--hotspot-color);background:color-mix(in srgb,var(--hotspot-color) 16%,transparent);border-radius:8px;box-shadow:0 0 0 2px rgba(255,255,255,.75),0 0 0 5px color-mix(in srgb,var(--hotspot-color) 35%,transparent);cursor:pointer;transition:background .15s,transform .15s}.hotspot:before{content:attr(data-index);position:absolute;top:-12px;left:-12px;background:var(--hotspot-color);color:#101722;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.68rem;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.18)}.hotspot:hover,.hotspot.selected{background:color-mix(in srgb,var(--hotspot-color) 32%,transparent)}.hotspot:hover{transform:scale(1.018)}.mode-player .hotspot{animation:pulse 2.2s infinite}.draw-rect{position:absolute;z-index:6;border:2px dashed var(--teal);background:rgba(32,185,157,.18);pointer-events:none}.empty-upload{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;background:#f1f4f8;color:#7d8797;z-index:2}.upload-icon{width:48px;height:48px;border:1px dashed #9ba4b1;border-radius:12px;display:grid;place-items:center;font-size:1.5rem}.empty-upload small{font-size:.72rem}.canvas-hint{max-width:620px;margin-top:18px;color:#778191;font-size:.76rem;text-align:center}.path-legend{margin-top:18px;display:flex;gap:15px;font-size:.75rem;color:#6f7887}.path-legend span{display:flex;align-items:center;gap:6px}.path-legend i{width:9px;height:9px;border-radius:50%}.notes-panel{background:#fff;border-left:1px solid var(--line);padding:34px 30px;overflow-y:auto}.notes-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.step-number{font-family:Georgia,serif;font-size:2.6rem;color:#d2d7df;line-height:1}.path-pill{font-size:.7rem;background:#f2f4f7;border-radius:999px;padding:7px 10px;color:#657083}.path-pill i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--teal);margin-right:5px}.screen-title-input{width:100%;border:0;border-bottom:1px solid transparent;padding:0 0 8px;font-family:Georgia,serif;font-size:2rem;font-weight:700;letter-spacing:-.03em;margin-bottom:28px}.screen-title-input:focus{outline:0;border-bottom-color:#cbd1db}.notes-panel h1{font-family:Georgia,serif;font-size:2rem;margin:0 0 20px}.notes-panel textarea{width:100%;resize:vertical;border:1px solid var(--line);border-radius:9px;padding:13px;line-height:1.55;margin-top:8px;min-height:140px}.notes-panel textarea:focus,.hotspot-editor input:focus,.hotspot-editor select:focus{outline:2px solid rgba(32,185,157,.18);border-color:var(--teal)}.instruction-tip{display:flex;gap:11px;color:#758092;background:#f5f7fa;border-radius:9px;padding:12px;margin-top:12px;font-size:.74rem;line-height:1.45}.instruction-tip span{color:var(--teal)}.instruction-tip p{margin:0}.section-rule{display:flex;align-items:center;gap:10px;margin:28px 0 16px;color:#9199a7;font-size:.67rem;font-weight:800;letter-spacing:.14em}.section-rule:after{content:"";height:1px;background:var(--line);flex:1}.no-selection{font-size:.78rem;color:#8c95a3;line-height:1.5}.hotspot-editor label{display:grid;gap:6px;margin-bottom:12px;color:#7d8795;font-size:.72rem;font-weight:650}.hotspot-editor input,.hotspot-editor select{border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:#fff;font-size:.82rem}.position-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 9px}.delete-button{border:0;background:transparent;color:#c34f58;padding:6px 0;font-size:.76rem}.player-note{line-height:1.7;color:#535e6f;font-size:1rem}.player-help{border-top:1px solid var(--line);margin-top:30px;padding-top:20px}.player-help span{font-size:.68rem;background:var(--navy);color:#fff;border-radius:999px;padding:4px 8px}.player-help p{font-size:.78rem;color:#7a8494;line-height:1.5}.player-only{display:none}.mode-player .creator-only{display:none!important}.mode-player .player-only{display:flex}.mode-player .player-note,.mode-player .notes-panel h1{display:block}.mode-player .stage{grid-template-columns:minmax(420px,1fr) 350px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,25px);background:var(--navy);color:#fff;border-radius:9px;padding:10px 15px;font-size:.8rem;opacity:0;pointer-events:none;transition:.2s;z-index:50}.toast.show{opacity:1;transform:translate(-50%,0)}
.hotspot.shape-circle{border-radius:50%}.hotspot.shape-square{border-radius:6px}.preset-label{color:#9199a7;font-size:.65rem;font-weight:800;letter-spacing:.12em;margin:2px 0 7px}.size-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:13px}.size-presets button{border:1px solid var(--line);background:#f7f8fa;border-radius:7px;padding:7px 4px;font-size:.68rem;color:#687384}.size-presets button:hover{border-color:var(--teal);color:var(--ink);background:#f0fbf8}
.resize-handle{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--hotspot-color);z-index:8;box-shadow:0 1px 5px rgba(20,28,40,.3)}.resize-handle.north{top:-7px;left:50%;transform:translateX(-50%);cursor:ns-resize}.resize-handle.east{right:-7px;top:50%;transform:translateY(-50%);cursor:ew-resize}.resize-handle.south{bottom:-7px;left:50%;transform:translateX(-50%);cursor:ns-resize}.resize-handle.west{left:-7px;top:50%;transform:translateY(-50%);cursor:ew-resize}.resize-handle.south-east{right:-7px;bottom:-7px;cursor:nwse-resize}.shape-circle .resize-handle{width:13px;height:13px}
@keyframes pulse{0%,100%{box-shadow:0 0 0 2px rgba(255,255,255,.75),0 0 0 5px color-mix(in srgb,var(--hotspot-color) 30%,transparent)}50%{box-shadow:0 0 0 2px rgba(255,255,255,.75),0 0 0 9px color-mix(in srgb,var(--hotspot-color) 8%,transparent)}}
@media(max-width:1050px){.workspace{grid-template-columns:220px 1fr}.topbar{grid-template-columns:220px 1fr auto}.stage{grid-template-columns:1fr 300px}.notes-panel{padding:28px 22px}.stage-toolbar{padding:0 16px}.select-wrap{display:none}.device-area{padding:24px}.device-shell.desktop,.device-shell.tablet,.device-shell.classic{width:min(52vw,620px)}}
@media(max-width:800px){body{overflow:auto}.topbar{height:auto;min-height:64px;grid-template-columns:1fr auto;padding:12px 15px}.project-title{display:none}.top-actions #exportBtn{display:none}.workspace{height:auto;display:block}.sidebar{border:0;border-bottom:1px solid var(--line);padding:12px 14px}.sidebar>.panel-heading,.screen-list,.add-screen-row,.text-action{display:none}.path-section{margin:0;padding:0;border:0}.path-section .panel-heading{display:none}.path-list{flex-direction:row;overflow-x:auto}.path-item{width:auto;white-space:nowrap;padding:7px 10px;background:#f2f4f7;border-radius:999px}.stage-toolbar{height:auto;min-height:66px;gap:10px;flex-wrap:wrap}.breadcrumbs{display:none}.stage{display:flex;flex-direction:column}.device-area{min-height:540px;padding:25px 18px}.device-shell.phone{height:500px}.device-shell.desktop,.device-shell.tablet,.device-shell.classic{width:min(90vw,650px)}.notes-panel{border:0;border-top:1px solid var(--line)}.mode-player .stage{display:flex}.toolbar-actions{width:100%;justify-content:flex-end}.toolbar-actions .secondary{display:none}}
@media(max-width:480px){.mode-switch button{padding:7px 10px}.device-shell.phone{height:470px}.device-area{min-height:520px}.stage-toolbar{padding:10px}.notes-panel{padding:26px 20px}}
@media(max-width:800px){.sidebar>.panel-heading{display:flex}.screen-list{display:flex;flex-direction:row;overflow-x:auto;padding:2px}.screen-item{min-width:178px}.add-screen-row{display:block;padding:8px}.toolbar-actions .secondary{display:inline-block}.path-section{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}}
.screen-item-wrap{display:grid;grid-template-columns:22px minmax(0,1fr) 24px 24px;align-items:center;gap:2px;position:relative;border-radius:10px;transition:opacity .15s,transform .15s}.screen-item-wrap.reordering{opacity:.5;transform:scale(.98)}.screen-drag,.screen-rename,.screen-delete{width:24px;height:28px;border:0;border-radius:6px;background:transparent;color:#a3aab6;line-height:1;opacity:0;transition:.15s}.screen-drag{width:22px;padding:0;font-size:1rem;cursor:grab;touch-action:none}.screen-drag:active{cursor:grabbing}.screen-rename{font-size:.82rem}.screen-delete{font-size:1.15rem}.screen-item-wrap:hover .screen-drag,.screen-item-wrap:hover .screen-rename,.screen-item-wrap:hover .screen-delete,.screen-drag:focus-visible,.screen-rename:focus-visible,.screen-delete:focus-visible,.screen-item-wrap.active .screen-drag,.screen-item-wrap.active .screen-rename,.screen-item-wrap.active .screen-delete{opacity:1}.screen-drag:hover,.screen-rename:hover{background:#e7f7f4;color:#117b69}.screen-delete:hover{background:#feecee;color:#bc3e49}.screen-drag:focus-visible,.screen-rename:focus-visible,.screen-delete:focus-visible{outline:2px solid var(--teal);outline-offset:1px}.screen-delete:focus-visible{outline-color:#d45b65}.reordering-screens,.reordering-screens *{cursor:grabbing!important;user-select:none!important}.mode-player .screen-item-wrap{grid-template-columns:minmax(0,1fr)}.mode-player .screen-drag,.mode-player .screen-rename,.mode-player .screen-delete{display:none}@media(max-width:800px){.screen-item-wrap{flex:0 0 100%;min-width:0}.screen-item-wrap .screen-item{min-width:0}.screen-drag,.screen-rename,.screen-delete{opacity:1}}
.brand{min-width:0}.brand>span:last-child{white-space:nowrap}.workspace{grid-template-columns:285px minmax(0,1fr)}.topbar{grid-template-columns:285px minmax(0,1fr) auto}.screen-item{grid-template-columns:42px minmax(0,1fr) 20px;align-items:start}.screen-meta{min-width:0}.screen-meta strong{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.25}.screen-meta small{display:block;margin-top:3px;line-height:1.3}.path-item{align-items:flex-start}.path-item span:nth-child(2){min-width:0;overflow-wrap:anywhere;line-height:1.3}.path-count{flex:0 0 auto}.notes-header{gap:12px}.path-pill{max-width:75%;white-space:normal;overflow-wrap:anywhere;text-align:right;line-height:1.3}.hotspot-editor input,.hotspot-editor select,.notes-panel textarea,.screen-title-input{min-width:0;max-width:100%}.button,.mode-switch button,.select-wrap{white-space:nowrap}.instruction-tip{font-size:.78rem}.player-help p,.no-selection{overflow-wrap:anywhere}
@media(max-width:1050px) and (min-width:801px){.workspace{grid-template-columns:240px minmax(0,1fr)}.topbar{grid-template-columns:240px minmax(0,1fr) auto}.brand{font-size:.92rem;gap:8px}.brand-mark{transform:scale(.88);transform-origin:left center}}
@media(max-width:800px){.screen-list{scroll-snap-type:x mandatory}.screen-item-wrap{flex:0 0 100%;min-width:0;scroll-snap-align:start}.screen-item-wrap .screen-item{min-width:0}.screen-item{grid-template-columns:42px minmax(0,1fr) 16px}.screen-meta strong{font-size:.82rem}.topbar{grid-template-columns:minmax(0,1fr) auto}.brand{font-size:.96rem}.brand-mark{flex:0 0 auto}}
@media(max-width:480px){.topbar{grid-template-columns:1fr;gap:10px}.top-actions{width:100%;justify-content:flex-end}.brand{font-size:1rem}.mode-switch{width:100%}.mode-switch button{flex:1}.notes-header{align-items:flex-start}.path-pill{max-width:70%}.screen-title-input,.notes-panel h1{font-size:1.7rem}.instruction-tip{font-size:.8rem}}
.path-item-wrap{position:relative;min-width:0}.path-item-wrap .path-item{padding-right:34px}.path-rename{position:absolute;right:1px;top:50%;transform:translateY(-50%);width:27px;height:27px;border:0;border-radius:7px;background:transparent;color:#9199a7;font-size:.86rem;opacity:0;transition:.15s}.path-item-wrap:hover .path-rename,.path-rename:focus-visible{opacity:1}.path-rename:hover{background:#e7f7f4;color:#117b69}.path-rename:focus-visible{outline:2px solid var(--teal);outline-offset:1px}.notes-panel textarea.screen-title-input{display:block;width:100%;height:auto;min-height:44px;margin:0 0 28px;padding:0 0 8px;resize:none;overflow:hidden;border:0;border-bottom:1px solid transparent;border-radius:0;background:transparent;font-family:Georgia,serif;font-size:2rem;font-weight:700;letter-spacing:-.03em;line-height:1.1;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal}.notes-panel textarea.screen-title-input:focus{outline:0;border-bottom-color:#cbd1db}.notes-panel h1{max-width:100%;line-height:1.1;white-space:normal;overflow-wrap:anywhere;word-break:normal}.screen-title-input::placeholder{color:#a4abb7}@media(max-width:800px){.path-item-wrap{flex:0 0 auto}.path-rename{opacity:1}.notes-panel textarea.screen-title-input{font-size:1.7rem;min-height:42px}}
.project-dialog{width:min(620px,calc(100vw - 32px));max-height:min(760px,calc(100vh - 32px));border:0;border-radius:16px;padding:0;background:#fff;color:var(--ink);box-shadow:0 30px 90px rgba(11,19,34,.32);overflow:auto}.project-dialog::backdrop{background:rgba(12,19,31,.62);backdrop-filter:blur(3px)}.dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;padding:26px 28px 10px}.dialog-heading h2{margin:4px 0 0;font-size:1.5rem}.dialog-close{width:36px;height:36px;border:0;border-radius:50%;background:#f1f3f6;color:#657083;font-size:1.35rem}.dialog-copy{margin:0;padding:0 28px 20px;color:#697486;font-size:.85rem;line-height:1.55;overflow-wrap:anywhere}.folder-card{margin:0 28px;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid var(--line);border-radius:12px;background:#f7f9fb}.folder-card>div{min-width:0}.folder-card strong{display:block;margin-top:5px;white-space:normal;overflow-wrap:anywhere}.project-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:16px 28px 5px}.project-actions .button{white-space:normal;line-height:1.25}.dialog-rule{display:flex;align-items:center;gap:12px;margin:21px 28px 11px;color:#9199a7;font-size:.67rem;font-weight:800;letter-spacing:.13em}.dialog-rule:after{content:"";height:1px;background:var(--line);flex:1}.local-project-list{display:grid;gap:7px;padding:0 28px}.local-project{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:#fff}.local-project.current{border-color:#8ed8cb;background:#f3fbf9}.local-project strong,.local-project small{display:block;overflow-wrap:anywhere}.local-project strong{font-size:.86rem}.local-project small{margin-top:3px;color:#8b94a3;font-size:.7rem}.local-project button{border:1px solid var(--line);border-radius:7px;background:#fff;padding:6px 10px;font-size:.73rem}.folder-help{min-height:18px;margin:14px 28px 25px;color:#7b8595;font-size:.75rem;line-height:1.45;overflow-wrap:anywhere}@media(max-width:650px){.project-actions{grid-template-columns:1fr}.folder-card{align-items:flex-start;flex-direction:column}.folder-card .button{width:100%}.dialog-heading{padding:22px 20px 10px}.dialog-copy,.project-actions,.local-project-list{padding-left:20px;padding-right:20px}.folder-card,.dialog-rule,.folder-help{margin-left:20px;margin-right:20px}}
.screen-drag,.screen-rename,.screen-delete{opacity:1}
.supporting-images-help{margin:0 0 10px;color:#758092;font-size:.78rem;line-height:1.45}.instruction-images-editor .button{margin-bottom:12px}.instruction-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.instruction-image{position:relative;margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f6f8fa}.instruction-image img{display:block;width:100%;height:132px;object-fit:cover}.instruction-image button{position:absolute;top:6px;right:6px;width:26px;height:26px;border:0;border-radius:50%;background:rgba(17,26,44,.82);color:#fff;font-size:1rem;line-height:1}.mode-player .sidebar{display:none}.mode-player .workspace{grid-template-columns:1fr}.mode-player .instruction-images{display:grid;margin-top:22px}.mode-player .instruction-image img{height:auto;max-height:280px;object-fit:contain;background:#f6f8fa}@media(max-width:800px){.instruction-image img{height:150px}.mode-player .instruction-images{grid-template-columns:1fr}}
.hotspot:before{display:none}
.player-controls .button:disabled{cursor:not-allowed;opacity:.45;box-shadow:none}
.stage-wrap{min-height:0}.stage{min-height:0;overflow:hidden}.notes-panel{min-height:0;overscroll-behavior:contain}@media(max-width:800px){.stage{overflow:visible}}
.finished-controls{position:fixed;z-index:60;top:18px;right:18px;display:flex;gap:10px}.mode-finished{background:#edf1f6}.mode-finished .topbar,.mode-finished .sidebar,.mode-finished .stage-toolbar{display:none}.mode-finished .workspace{height:100vh;grid-template-columns:minmax(0,1fr)}.mode-finished .stage{height:100%;grid-template-columns:minmax(420px,1fr) minmax(300px,390px)}.mode-finished .device-area{padding:32px}.mode-finished .device-shell.phone{height:min(86vh,860px)}.mode-finished .notes-panel{padding:42px 30px 30px}.mode-finished .notes-panel textarea{display:none}.mode-finished .instruction-tip,.mode-finished .instruction-images-editor,.mode-finished .hotspot-editor{display:none}.mode-finished .player-note{font-size:1rem}.mode-finished .player-help{margin-top:24px}@media(max-width:800px){.mode-finished{overflow:auto}.mode-finished .workspace{height:auto;display:block}.mode-finished .stage{height:auto;display:flex;flex-direction:column;overflow:visible}.mode-finished .device-area{min-height:0;padding:54px 16px 22px}.mode-finished .device-shell.phone{height:min(72svh,720px)}.mode-finished .device-shell.desktop,.mode-finished .device-shell.tablet,.mode-finished .device-shell.classic{width:100%;max-width:720px}.mode-finished .notes-panel{padding:28px 22px}.finished-controls{top:10px;right:10px}.finished-controls .button{padding:8px 10px;font-size:.78rem}}
.account-button{border:1px solid #526078;background:#f2f5f9;color:#111a2c;border-radius:8px;padding:8px 12px;font-size:.82rem;font-weight:750}.account-button:hover{background:#fff}.account-dialog{width:min(430px,calc(100vw - 32px));border:0;border-radius:16px;padding:0;background:#fff;color:var(--ink);box-shadow:0 30px 90px rgba(11,19,34,.32)}.account-dialog::backdrop{background:rgba(12,19,31,.62);backdrop-filter:blur(3px)}.account-form{display:grid;gap:14px;padding:0 28px 22px}.account-form label{display:grid;gap:6px;color:#586477;font-size:.78rem;font-weight:700}.account-form input{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 11px;background:#fff}.account-form input:focus{outline:2px solid rgba(32,185,157,.18);border-color:var(--teal)}.account-message{min-height:20px;margin:0;color:#a43f4a;font-size:.78rem;line-height:1.45}.account-message.success{color:#167968}.account-form .button{width:100%}.account-footer{display:flex;justify-content:center;gap:7px;border-top:1px solid var(--line);padding:17px 22px 22px;color:#6f7a8b;font-size:.8rem}.text-button{border:0;background:transparent;color:#117b69;font-weight:750;padding:0}.text-button:hover{text-decoration:underline}@media(max-width:480px){.account-form{padding-left:20px;padding-right:20px}.account-dialog .dialog-heading,.account-dialog .dialog-copy{padding-left:20px;padding-right:20px}.account-footer{flex-wrap:wrap}}