:root{--bg:#f4f6f2;--ink:#173d31;--accent:#008366;--muted:#64766c;--line:#d8e1d9;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}
body{display:block;padding:0;background:#f4f6f2;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink)}
button,a,input{-webkit-tap-highlight-color:transparent}
button{font:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #008366;outline-offset:5px}
.preview-shell{width:100%;max-width:1440px;margin:auto;padding:0 46px}
.preview-header{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}.brand svg{width:36px;height:36px}.brand strong{font-size:26px;letter-spacing:-1.4px;font-weight:650}
.preview-label{display:flex;align-items:center;gap:9px;font-size:11px;color:#68796e}.preview-label i,.visual-foot i{display:inline-block;width:6px;height:6px;background:#008366;border-radius:100%}
.experience{display:grid;grid-template-columns:310px minmax(0,1fr);gap:34px;align-items:center;padding:34px 0 24px}
.eyebrow{font:10px/1.5 var(--mono);letter-spacing:1.5px;color:#728476}
h1{font-size:62px;line-height:1.02;font-weight:500;letter-spacing:-3.8px;margin:24px 0 20px}h1 em{font-family:Georgia,serif;font-weight:400;color:#008366;letter-spacing:-3px}
.intro{font-size:16px;line-height:1.7;color:#64776b;margin:0 0 25px}
.chapter-list{display:grid;gap:4px;margin-left:-12px}.chapter-list button{border:1px solid transparent;background:none;display:flex;align-items:center;text-align:left;gap:16px;padding:12px;cursor:pointer;color:var(--ink);border-radius:10px;transition:background .3s,border-color .3s,transform .3s}.chapter-list button>span{font:10px var(--mono);color:#8c9d90}.chapter-list b{font-size:13px;font-weight:600;display:block}.chapter-list small{font-size:10px;display:block;color:#839186;margin-top:5px}.chapter-list i{margin-left:auto;font-style:normal;color:#008366;opacity:0}.chapter-list button.active{background:#e4eee5;border-color:#cbded1;transform:translateX(3px)}.chapter-list button.active i{opacity:1}.chapter-list button.active>span{color:#008366}.chapter-list button:hover{background:#eaf0e8}
.story-note{max-width:245px;font-size:10px;line-height:1.7;color:#859184;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.visual{min-width:0;align-self:center}.stage{width:100%;aspect-ratio:1.13;min-height:470px;max-height:680px;background:radial-gradient(ellipse at 52% 54%,#e1e9df00 0%,#f4f6f2 80%);border-radius:20px}
.stage::after{background:radial-gradient(ellipse at center,#f4f6f200 56%,#f4f6f2 97%)}
.caption{top:18px;left:20px;font-size:9px;letter-spacing:1.2px;color:#5e7766}.plus.tr{top:18px;right:20px}.plus.br{right:20px;bottom:20px}.hint{left:20px;bottom:24px;font-size:8px;letter-spacing:.7px}
.tag{width:216px;padding:14px;border-radius:12px;background:rgba(255,255,255,.95);border:1px solid #d8e3da;box-shadow:0 14px 30px -15px #183e3655;backdrop-filter:blur(12px)}.tag.slim{width:184px}.ph{font-size:8px;margin-bottom:9px;color:#839286}.ph b{letter-spacing:1.1px}.row{font-size:11px}.row span{color:#718174}.row em{font-size:10px;color:#214633}.row.in{padding:7px 0;max-height:38px}.btn{font-size:11px;padding:9px;border-radius:6px;background:#0f4937}.btn.done{background:#def0e4}.note{font-size:10px;line-height:1.5}.sw span{width:23px;height:23px}.fin{font-size:12px;margin-top:10px}
.card{right:20px;bottom:48px;width:258px;box-shadow:0 10px 35px -16px #18443455;border-color:#d2e1d5;border-radius:12px;padding:14px 16px}.card .title{font-size:12px;line-height:1.4}.card .sub{font-size:10px;line-height:1.4}.card .chip{font-size:8px;color:#008366}.card .icon{width:34px;height:34px;background:#e0eee2}.steps{margin-top:8px}
.dim{font-size:8px}.vf{inset:16% 25% 23% 19%;opacity:0}.vf.on{opacity:.65}
.transport{display:flex;align-items:center;gap:12px;padding:16px 16px;background:#ffffffb0;border:1px solid #dce5db;border-radius:12px;margin-top:4px}.transport button{border:0;background:none;color:#375543;cursor:pointer;min-width:30px;height:32px;border-radius:7px;font-size:18px}.transport button:hover{background:#e1eee3}.transport .play{background:#183e36;color:white;width:36px;font-size:14px}.transport .play:hover{background:#008366}#speed{font:11px var(--mono)}#timecode{font:9px var(--mono);white-space:nowrap;color:#6a7b70}
input[type=range]{--progress:0%;flex:1;min-width:30px;appearance:none;background:linear-gradient(to right,#008366 var(--progress),#dce6da var(--progress));height:3px;border-radius:5px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;background:#008366;border-radius:50%;border:2px solid white;box-shadow:0 0 0 1px #008366}
.visual-foot{display:flex;justify-content:space-between;padding:13px 3px;color:#8a978a;font-size:9px}.visual-foot span:first-child{display:flex;align-items:center;gap:7px}.visual-foot i{width:4px;height:4px}
.preview-footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:22px 0;font:9px var(--mono);letter-spacing:.7px;color:#849183}.preview-footer b{margin:0 10px;font-weight:400;color:#a2afa2}
@media(min-width:1400px){.experience{grid-template-columns:340px minmax(0,1fr);gap:65px}.stage{aspect-ratio:1.17}h1{font-size:72px}}
@media(max-width:1050px){.preview-shell{padding:0 26px}.experience{grid-template-columns:255px minmax(0,1fr);gap:12px}h1{font-size:54px}.stage{min-height:470px;aspect-ratio:1}.tag{width:180px;padding:11px}.row span{font-size:9px}.row em{font-size:9px}.card{width:224px}.story-note{max-width:230px}.intro{font-size:14px}}
@media(max-width:760px){.preview-shell{padding:0 18px}.preview-header{height:76px}.brand strong{font-size:23px}.brand svg{width:32px;height:32px}.preview-label{font-size:9px}.experience{display:flex;flex-direction:column;align-items:stretch;padding-top:28px}.eyebrow{font-size:8px}h1{font-size:52px;margin:14px 0}h1 br{display:none}h1 em{margin-left:8px}.intro{font-size:13px;line-height:1.6;margin-bottom:16px}.intro br{display:none}.chapter-list{display:flex;overflow:auto;margin:0;padding-bottom:7px;gap:6px}.chapter-list button{flex:none;padding:9px 11px;gap:8px;border-color:#dbe4d9;border-radius:8px}.chapter-list button.active{transform:none}.chapter-list b{font-size:10px}.chapter-list small,.chapter-list i,.story-note{display:none}.chapter-list button>span{font-size:8px}.stage{min-height:0;aspect-ratio:.92}.tag{width:164px;padding:10px}.tag.slim{width:158px}.row.in{padding:5px 0}.ph{font-size:7px}.card{width:218px;right:12px;bottom:38px;padding:11px}.card .title{font-size:11px}.card .sub{font-size:9px}.hint{bottom:12px;left:12px;font-size:7px}.caption{left:12px;top:15px;font-size:8px}.transport{gap:6px;padding:10px}.transport button{min-width:26px}#timecode{font-size:8px}.visual-foot{font-size:8px;gap:10px}.preview-footer{font-size:7px;letter-spacing:0}.preview-footer span:last-child{display:none}.preview-footer b{margin:0 7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.story{min-width:0}
@media(max-width:760px){.story,.visual{width:100%;min-width:0}.chapter-list{max-width:100%}h1 br{display:block}h1 em{margin-left:0}.preview-label{max-width:125px;text-align:right;line-height:1.5}.preview-footer{overflow-wrap:anywhere}.stage{overflow:hidden}}
@media(max-width:360px){.tag{width:145px}.card{width:190px}.preview-shell{padding:0 12px}.visual-foot{font-size:7px}.transport{gap:3px}h1{font-size:48px}}

@media(max-width:760px){.stage{aspect-ratio:.78}.card{display:none}.chapter-list{scrollbar-width:thin}.tag{width:158px}.hint{bottom:16px}}
#tStudio{width:246px}#tStudio.show{pointer-events:auto}
#swatches{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}
.finish-choice{display:flex;align-items:center;gap:6px;border:1px solid #d9e2da;background:#f7f9f5;color:#395447;border-radius:6px;min-height:36px;padding:6px;text-align:left;cursor:pointer}
.finish-choice i{width:16px;height:16px;border-radius:50%;flex:none;border:1px solid #ffffff99;box-shadow:inset 1px 1px 3px #fff9,inset -2px -2px 3px #0003}
.sw .finish-choice span{width:auto;height:auto;border:none;border-radius:0;box-shadow:none;font-size:9px;line-height:1.3;display:block}
.finish-choice.on{background:#e3f0e5;border-color:#008366}.finish-choice:hover{border-color:#008366}
#studioPDF em,#studioExcel em{font-size:9px}#studioPDF span,#studioExcel span{font-size:10px}#studioProgress{transition:width .15s linear}
@media(max-width:760px){.stage[data-scene="3"]{aspect-ratio:.54}}
@media(max-width:760px){#tStudio{width:192px;padding:10px}.finish-choice{min-height:32px;padding:4px;gap:4px}.sw .finish-choice span{font-size:8px}.finish-choice i{width:13px;height:13px}#tStudio .fin{font-size:10px;margin:5px 0}#tStudio .btn{font-size:9px;padding:7px}#studioPDF span,#studioExcel span,#studioPDF em,#studioExcel em{font-size:8px}.stage{aspect-ratio:.67}}

.sw-logo{display:flex;align-items:flex-start;gap:3px;margin:2px 0 4px;min-height:25px}.sw-logo img{display:block;width:140px;height:auto;max-height:38px;object-fit:contain}.sw-logo>span{font-size:9px}.sw-credit{display:block;font-size:6px;color:#78877d;margin-bottom:13px}.studio-brand,#chip,#caption{text-transform:none!important}.dim{z-index:6}

/* Larger touch targets without changing the animation sequence. */
@media(max-width:760px){
  .chapter-list button{min-height:44px;padding:10px 12px}
  .chapter-list b{font-size:11px}
  .transport button,.transport .play{min-width:44px;width:44px;height:44px;flex-shrink:0}
  .transport{display:grid;grid-template-columns:44px 44px minmax(0,1fr) 44px;gap:6px;padding:8px}
  #timecode{grid-column:3;grid-row:1;text-align:center;font-size:9px}
  #speed{grid-column:4;grid-row:1;font-size:12px}
  #timeline{grid-column:1/-1;grid-row:2;width:100%;height:32px;margin:0;background-size:100% 3px;background-repeat:no-repeat;background-position:center}
  input[type=range]::-webkit-slider-thumb{width:20px;height:20px}
  .finish-choice{min-height:44px}
}