@font-face{font-family:DM;src:url('/assets/site-design/home/dm-sans.woff2')}@font-face{font-family:Hindi;src:url('/assets/chopper/noto-sans-devanagari.ttf')}*{box-sizing:border-box}html{background:#0b0c0e;color:#f4f0ea;font-family:DM,Hindi,sans-serif}body{margin:0;min-width:320px;min-height:900px;background:#0b0c0e;--accent:#dbb9ee;--glow:#e9a9e0;--shell:min(1320px,calc(100% - 112px))}body[data-model=velvet]{--accent:#c5c2f9;--glow:#a7c7f0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #e3bfff;outline-offset:5px}[hidden]{display:none!important}.shell{width:var(--shell);margin-inline:auto}.muted{font-size:12px;line-height:1.6;color:#9b969e;margin:9px 0}#stage,#scene-dissolve{position:fixed;inset:0;width:100%;height:100svh;min-height:800px;display:block;touch-action:pan-y}.vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#0b0c0ed9 0%,#0b0c0e94 28%,transparent 53%),linear-gradient(180deg,#0b0c0eaa,transparent 20%,transparent 75%,#0b0c0ef7);height:100svh;min-height:800px}header{position:relative;z-index:3;display:flex;align-items:center;height:100px;border-bottom:1px solid #ffffff12;gap:32px}header>a{display:flex;flex:none}header img{width:134px;filter:brightness(0) invert(1)}nav{display:flex;align-items:center;gap:6px;border-left:1px solid #ffffff25;padding-left:24px}nav button{padding:13px 14px;font-size:12px;color:#8a878d;white-space:nowrap;border-radius:7px}nav button[aria-pressed=true]{color:#f6edf8;background:#ffffff07}nav button:hover{color:#eee3ee}.header-right{margin-left:auto;display:flex;align-items:center;gap:26px}.lang{display:flex;align-items:center;gap:11px}.lang button{font-size:11px;min-height:42px;padding:5px 1px;color:#85818a}.lang button[aria-pressed=true]{color:#f8effa}.lang>span{color:#48444b;font-size:10px}.info{width:32px;height:32px;border:1px solid #ffffff26;border-radius:50%;font-size:12px;flex:none}main{position:relative;z-index:2;min-height:max(800px,calc(100svh - 100px));display:flex;flex-direction:column}.workspace{position:relative;width:410px;padding:48px 0 28px;z-index:2}.eyebrow{display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:.21em;color:#b7acaa;font-weight:400;margin:0 0 24px}.eyebrow span{width:19px;height:1px;background:#b7a89b}.eyebrow b{font-weight:400}h1{font-size:clamp(48px,4.4vw,65px);line-height:1.06;letter-spacing:-.065em;font-weight:450;margin:0}h1 em{font-style:normal;color:#a6a0a9;transition:color 1.5s}body[data-view=after] h1 em,body[data-phase=processing] h1 em{color:var(--accent)}#subtitle{color:#9b949e;font-size:13px;margin:19px 0 29px}.section-label{display:flex;align-items:center;justify-content:space-between;color:#a39aa9;font-size:9px;letter-spacing:.14em;min-height:30px}.section-label .text-button{font-size:11px;letter-spacing:0}.text-button{font-size:11px;color:#c8bbcf;padding:8px 0;min-height:36px}.text-button:hover{color:#fff}.file-entry{display:flex;gap:12px;align-items:center;border-block:1px solid #ffffff16;padding:12px 0;font-size:12px}.file-entry+.file-entry{border-top:0}.file-entry .file-symbol{font-size:19px;color:var(--accent)}.file-entry strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:450;max-width:335px}.file-entry small{display:block;color:#837a8a;font-size:10px;margin-top:3px}#file-list{max-height:145px;overflow:auto;scrollbar-width:thin;scrollbar-color:#4d405b transparent}#example{margin-top:-4px}#file-hint{font-size:10px}.model-heading{margin-top:13px;margin-bottom:10px}.model-heading .info{width:26px;height:26px;min-height:26px}.models{display:grid;grid-template-columns:1fr 1fr;gap:10px}.models>button{border:1px solid #ffffff24;background:#16131c99;display:flex;align-items:center;text-align:left;gap:11px;border-radius:11px;padding:16px 14px;transition:border-color .3s,background .3s}.models>button:hover{border-color:#ad8bbe}.models>button[aria-pressed=true]{border-color:var(--accent);background:#292231ba;box-shadow:inset 0 0 25px #c4a7ff09}.models strong{font-size:16px;font-weight:500;display:block;letter-spacing:-.03em}.models small{font-size:10px;color:#a99eaf;display:block;margin-top:4px}.models i{width:9px;height:9px;margin-left:auto;flex:none;border:1px solid #86728e;border-radius:50%}.models [aria-pressed=true] i{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px #e5c6ff44}.model-icon{font-size:37px;line-height:1;color:#e0b6db;text-shadow:0 0 18px #ed9ed15c}.velvet-icon{color:#b8b5ed;transform:scaleX(1.3);text-shadow:0 0 18px #a2baff5c}#model-description{min-height:38px;font-size:11px;margin-top:12px;margin-bottom:16px}.primary{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;border-radius:40px;padding:0 23px;height:48px;background:linear-gradient(115deg,#c4a7ff,#e9a9e0 48%,#ffad8e);color:#261d2c;font-size:12px;font-weight:600;transition:transform .2s,filter .2s;min-width:205px}.primary>:last-child{font-size:22px;font-weight:400}.primary:hover:enabled{filter:brightness(1.07);transform:translateY(-2px)}body[data-model=velvet] .primary{background:linear-gradient(115deg,#bcb4ee,#d7c5f2 50%,#c7d8ef)}.secondary{border:1px solid #ffffff2a;padding:13px 15px;border-radius:24px;font-size:11px;min-height:44px}.secondary:hover{background:#ffffff0b}#status{font-size:12px;line-height:1.6;color:#f1b8b5;min-height:0;margin:9px 0 0}#status:empty{display:none}#processing{border-top:1px solid #ffffff24;padding-top:20px;min-height:270px}.log-heading{display:flex;align-items:center;gap:9px;font-size:12px;margin-bottom:14px}.log-heading strong{font-weight:450;color:#e6d9ec}.activity-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:breathe 1.6s ease-in-out infinite}.log-row{display:grid;grid-template-columns:1fr 13px;gap:9px;padding:8px 0;align-items:start;font:10px/1.5 ui-monospace,monospace;color:#a79aaf;animation:log-in .45s ease both}.log-row time{color:#685f70;font-size:9px}.log-row:last-child{color:#e5cbed}.log-row .tick{color:#baa1ce;font-size:11px}#live-log{height:186px;overflow:hidden;mask-image:linear-gradient(180deg,#0008,#000 24%);display:flex;flex-direction:column;justify-content:end}.log-bottom{display:flex;align-items:center;gap:10px;border-top:1px solid #ffffff13;margin-top:10px;padding-top:7px}#engine-status{font-size:10px;color:#94869f;flex:1}.log-bottom button{font-size:10px}.scene-caption{position:absolute;right:0;top:53%;display:flex;flex-direction:column;gap:7px;text-align:right;pointer-events:none}#visual-model{font-size:8px;letter-spacing:.22em;color:#ac98b5}#visual-description{font-size:10px;color:#6d626f}.complete-mark{color:var(--accent);font-size:16px}#result{border-top:1px solid #ffffff24;padding-top:14px;animation:log-in .65s ease both}#result h2{font-size:29px;font-weight:450;letter-spacing:-.045em;line-height:1.15;margin:11px 0}#result-facts{color:#a49aaa;font-size:12px;line-height:1.7;margin:0 0 21px}.result-actions{display:flex;gap:9px;align-items:center}.result-actions .primary{min-width:179px;font-size:12px}#archive{border-block:1px solid #ffffff18;margin-top:24px}summary{display:flex;gap:9px;align-items:center;font-size:11px;padding:17px 0;cursor:pointer;list-style:none;color:#baafc0}summary::-webkit-details-marker{display:none}.expand{margin-left:auto;font-size:19px;font-weight:300}details[open] .expand{transform:rotate(45deg)}#archive-log{list-style:none;padding:0 12px 12px 0;margin:0;max-height:220px;overflow:auto;scrollbar-width:thin;scrollbar-color:#6f5a7e transparent}#archive-log .log-row{animation:none;color:#b3a7bb;font-size:10px;border-bottom:1px solid #ffffff07}.restart-row{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}.restart-row button{font-size:10px;color:#9b8aa9}#album-tracks{display:flex;flex-wrap:wrap;gap:5px;margin-top:15px}#album-tracks button{font-size:10px;border:1px solid #ffffff20;border-radius:6px;padding:8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#album-tracks [aria-pressed=true]{background:#3b3049;border-color:#ba9bd1}.action-area{position:relative;margin-top:auto;padding-top:20px;padding-bottom:18px;width:100%;z-index:2}.transport{border-top:1px solid #ffffff25;border-bottom:1px solid #ffffff16;display:grid;grid-template-columns:1fr 1.7fr 1fr;align-items:center;gap:50px;padding:23px 0}.track{display:flex;align-items:center;gap:15px;min-width:0}.track>div:last-child{min-width:0}.file-mark{width:44px;height:44px;flex:none;display:grid;place-items:center;background:linear-gradient(145deg,#35303a,#15151b);border:1px solid #ffffff1a;border-radius:5px;font-size:22px;position:relative;color:#d3bfdc}.file-mark span{position:absolute;bottom:3px;right:5px;font-size:9px}.track strong{font-size:12px;font-weight:450;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:280px}.track small{font-size:9px;color:#8f8396;display:block;margin-top:6px}.playback{display:flex;align-items:center;gap:18px;min-width:0}.play{width:42px;height:42px;flex:none;border-radius:50%;background:#eee4eb;color:#231d2a;display:grid;place-items:center}.play svg{width:20px;height:20px;fill:currentColor}.timeline{position:relative;height:44px;flex:1;min-width:0}#wave{width:100%;height:30px;display:block}#seek{position:absolute;top:0;left:0;width:100%;height:30px;margin:0;opacity:0;cursor:pointer}#seek:focus-visible{opacity:.55}.times{display:flex;justify-content:space-between;font:9px ui-monospace,monospace;color:#928796;margin-top:3px}.ab{display:flex;justify-self:end;align-items:center;border:1px solid #ffffff26;padding:4px;border-radius:8px;background:#100f1499}.ab button{min-width:80px;padding:12px 20px;font-size:11px;border-radius:5px;transition:background .5s,color .5s;color:#aaa0b2}.ab [aria-pressed=true]{color:#201924;background:#e4dce4}.ab [data-version=after][aria-pressed=true]{background:var(--accent)}.bottom-line{display:flex;justify-content:space-between;padding-top:15px;font-size:9px;color:#786d80}#format-info{letter-spacing:.08em;font-size:8px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}dialog{color:#eee7f1;background:#18151c;border:1px solid #ffffff30;border-radius:17px;padding:35px;max-width:470px;width:calc(100% - 36px);box-shadow:0 20px 80px #0009}dialog::backdrop{background:#030307aa;backdrop-filter:blur(12px)}dialog h2{font-size:29px;letter-spacing:-.04em;font-weight:450}dialog p:not(.eyebrow){font-size:13px;line-height:1.75;color:#b9b0bd}#close{position:absolute;top:9px;right:10px;min-width:44px;height:44px;font-size:25px}#fallback{font-size:12px;color:#a99eae;padding:14px;position:absolute;right:0;top:45%;width:200px}.lang-hi h1{font-size:49px;line-height:1.25;letter-spacing:-.035em}.lang-hi .log-row{font-family:Hindi,ui-monospace,monospace;font-size:11px}.lang-hi .workspace{width:420px}
@keyframes breathe{50%{opacity:.35;box-shadow:0 0 2px var(--accent)}}@keyframes log-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(min-width:1500px){.workspace{padding-top:65px}#subtitle{margin-bottom:38px}}
@media(max-width:1050px){body{--shell:calc(100% - 70px)}header{gap:22px}nav{padding-left:16px;gap:0}nav button{font-size:11px;padding:12px}.header-right{gap:14px}header img{width:116px}.workspace,.lang-hi .workspace{width:370px}h1{font-size:54px}.scene-caption{display:none}.transport{gap:25px;grid-template-columns:1fr 1.5fr 1fr}.ab button{min-width:65px;padding:12px}.result-actions .primary{min-width:166px}.file-entry strong{max-width:320px}}
@media(max-width:700px){body{--shell:calc(100% - 44px);min-height:100svh}header{height:116px;flex-wrap:wrap;gap:0;align-content:center;justify-content:space-between;border-bottom:1px solid #ffffff17}header img{width:111px}.header-right{gap:17px}.lang{gap:10px}.lang button{font-size:12px}.info{width:32px;height:32px}nav{order:3;width:100%;padding:8px 0 0;border:0;justify-content:space-between;gap:4px}nav button{flex:1;min-height:40px;padding:10px 5px;font-size:11px}main{min-height:calc(100svh - 116px)}.workspace,.lang-hi .workspace{width:100%;padding:29px 0 24px}.eyebrow{font-size:8px;margin-bottom:17px}h1{font-size:43px;line-height:1.05;letter-spacing:-.055em}.lang-hi h1{font-size:36px;line-height:1.27}#subtitle{font-size:12px;margin:14px 0 0}.title-block{pointer-events:none;position:relative;z-index:1}#work-panel{margin-top:205px;background:linear-gradient(180deg,#0b0c0e88,#0b0c0ee8 32%);position:relative}#stage,#scene-dissolve{height:820px;min-height:0;position:absolute}.vignette{position:absolute;height:850px;min-height:0;background:linear-gradient(180deg,#0b0c0ef0 0%,#0b0c0ea0 30%,transparent 38%,transparent 57%,#0b0c0eee 70%,#0b0c0e 86%)}.models>button{padding:14px 12px;gap:10px}.models strong{font-size:17px}.models small{font-size:10px}.file-entry strong{max-width:calc(100vw - 90px)}.model-heading{margin-top:13px}.model-icon{font-size:31px}#model-description{min-height:32px}#transform{width:100%}.section-label{font-size:9px}#processing{min-height:267px}#live-log{height:170px}.log-row{font-size:10px;padding:8px 0}.log-heading{font-size:12px}#result h2{font-size:27px}.result-actions{display:grid;grid-template-columns:1.15fr 1fr;gap:8px}.result-actions .primary{min-width:0;font-size:11px;padding:0 17px}.secondary{font-size:10px;padding:12px 10px}#result-facts{font-size:12px}#archive{margin-top:20px}#archive-log{max-height:220px}.action-area{padding-top:0}.transport{grid-template-columns:1fr;gap:16px;padding:17px 0}.track{gap:10px}.file-mark{width:32px;height:32px;font-size:16px}.track strong{font-size:11px;max-width:calc(100vw - 100px)}.track small{font-size:9px;margin-top:3px}.playback{grid-row:2;gap:15px}.ab{grid-row:3;justify-self:stretch}.ab button{flex:1;min-height:44px}.bottom-line{font-size:8px}#format-info{font-size:7px}.workspace{padding-bottom:24px}.restart-row button{font-size:9px;min-height:38px}#fallback{top:210px;width:100%;text-align:center}.scene-caption{display:none}}
@media(max-width:360px){body{--shell:calc(100% - 34px)}header img{width:98px}.header-right{gap:12px}h1{font-size:39px}.lang-hi h1{font-size:32px}#work-panel{margin-top:190px}.models>button{padding:13px 10px;gap:8px}.model-icon{font-size:26px}.models small{font-size:9px}.models strong{font-size:16px}.result-actions .primary{padding:0 13px}.restart-row{gap:4px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* One active thought, with its predecessors travelling upward into quiet. */
#live-log{position:relative;display:block;height:203px;mask-image:linear-gradient(180deg,transparent,#000 17%);overflow:hidden}
.story-line{position:absolute;left:0;right:0;bottom:9px;min-height:39px;padding-right:20px;font:400 14px/1.5 DM,Hindi,sans-serif;letter-spacing:-.015em;color:#efdbf6;transform:translateY(calc(var(--age)*-49px));opacity:1;transition:transform .65s cubic-bezier(.22,.61,.36,1),opacity .65s,color .65s;animation:thought-in .38s cubic-bezier(.22,.61,.36,1) both}
.story-line[data-age="1"]{opacity:.37;color:#c4b4ce}.story-line[data-age="2"]{opacity:.18}.story-line[data-age="3"]{opacity:.07}
@keyframes thought-in{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
.story-line:not([data-age="0"]){animation:none}
@media(max-width:700px){#live-log{height:195px}.story-line{font-size:13px;min-height:43px;transform:translateY(calc(var(--age)*-49px));padding-right:2px}.lang-hi .story-line{font-size:13px}}

@media(max-width:700px){.story-line{transform:translateY(calc(var(--age)*-63px))}}
@media(max-width:700px){
 .vignette{background:linear-gradient(180deg,#0b0c0e 0px,#0b0c0e 274px,#0b0c0eaa 316px,transparent 360px,transparent 458px,#0b0c0ee8 530px,#0b0c0e 620px)}
 .lang-hi .eyebrow{letter-spacing:.04em;font-size:10px}nav button{font-size:12px}.text-button{font-size:12px}.result-actions .primary{font-size:12px}.secondary{font-size:11px}.restart-row button{font-size:10px}
}


/* One intake button: choose a file, see it load, then master it. */
h1{font-size:54px;line-height:1.08;letter-spacing:-.055em}
#setup .model-heading{margin-top:0;min-height:0;margin-bottom:15px;font-size:13px;letter-spacing:0;color:#d8ccdf}
#model-description{min-height:34px;margin-bottom:0}
.intake-actions{margin-top:24px;display:flex;flex-direction:column;gap:11px}
#transform{width:100%;min-height:54px;position:relative;overflow:hidden;isolation:isolate;text-align:left}
#transform #intake-label{font-size:14px;font-weight:600;position:relative;z-index:2}
#transform .intake-icon{position:relative;z-index:2}
#transform .loading-wave{display:none;gap:3px;height:22px;align-items:center;position:relative;z-index:2}
.loading-wave i{display:block;width:3px;height:7px;border-radius:3px;background:#45324e;animation:intake-wave .75s ease-in-out infinite alternate}
.loading-wave i:nth-child(2){animation-delay:-.15s}.loading-wave i:nth-child(3){animation-delay:-.4s}.loading-wave i:nth-child(4){animation-delay:-.3s}.loading-wave i:nth-child(5){animation-delay:-.55s}
body[data-loading=song] #transform{opacity:1;transform:none}
body[data-loading=song] #transform:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,transparent 15%,#fff8 50%,transparent 85%);animation:intake-sweep 1.5s ease-in-out infinite}
body[data-loading=song] #transform .intake-icon{display:none}
body[data-loading=song] #transform .loading-wave{display:flex}
@keyframes intake-wave{to{height:22px;opacity:.6}}
@keyframes intake-sweep{from{translate:-110% 0}to{translate:110% 0}}
.reference-button{border:1px solid #ffffff29;border-radius:28px;min-height:48px;padding:12px 18px;font-size:13px;text-align:center;color:#d2c3da;background:#ffffff03}
.reference-button:hover{background:#ffffff09;border-color:#c1a6d3}
#file-hint{font-size:10px;text-align:center;margin:0;color:#8f8497}
.loaded-slot{margin-top:17px;border:1px solid #ffffff1c;border-radius:11px;background:#121018b3;padding:8px 13px}
.slot-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:#a496ae}
.slot-head>div{display:flex;gap:12px}
.slot-head button{font-size:10px;min-height:32px;padding:4px 0;color:#c8b4d4}
.slot-head button:last-child{color:#a18fa9}
.file-entry{border:0;padding:3px 0 9px;gap:10px;min-width:0}
.file-entry strong{font-size:12px;font-weight:450;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;max-width:none}
.file-entry .file-symbol{font-size:17px}
.file-ready{font-size:12px;color:#c1a8d4;flex:none;margin-left:auto}
#file-list{max-height:140px}
.reference-steps{display:flex;gap:18px;margin-top:20px;font-size:11px;color:#8b7e94}
.reference-steps [data-ready=true]{color:#dfc1ee}
#reference-note{font-size:12px;line-height:1.6;color:#afa0b9;margin:9px 0 0;max-width:365px}
.process-guide{font-size:9px;color:#93829f;padding:0;min-height:16px;margin-left:auto;margin-right:22px}
#result-facts{overflow-wrap:anywhere}
body[data-phase=setup] .action-area{padding-top:5px}
@media(max-width:700px){
 h1{font-size:43px}.lang-hi h1{font-size:33px}
 #setup .model-heading{font-size:14px}
 .intake-actions{margin-top:22px}
 .slot-head button{min-height:38px;font-size:11px}
 .slot-head{font-size:11px}
 .loaded-slot{padding:7px 12px}
 .file-entry strong{font-size:12px}
 #model-description{font-size:12px;line-height:1.6;min-height:38px}
 #transform{min-height:54px}
 .reference-button{font-size:13px;min-height:48px}
 .process-guide{margin-right:0;font-size:9px}
 #format-info{display:none}
}
@media(max-width:360px){h1{font-size:37px}.lang-hi h1{font-size:29px}}
@media(prefers-reduced-motion:reduce){.loading-wave i{height:14px}}

/* Compact loaded files; one clear action, no extra step-by-step copy. */
#model-description{display:none}
.models{margin-bottom:24px}
.models>button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:none}
.loaded-slot{display:flex;align-items:center;gap:12px;padding:13px 14px;margin-top:10px;border:1px solid #ffffff20;border-radius:12px;background:linear-gradient(135deg,#1c1720aa,#100f14aa)}
.slot-copy{min-width:0;flex:1}
.slot-label{font-size:10px;color:#a18fae;display:block;margin-bottom:7px}
.slot-tools{display:flex;align-items:center;gap:10px;flex:none}
.slot-tools button{font-size:11px;min-height:40px;padding:4px 0;color:#cdb8db}
.slot-tools .remove-file{width:30px;height:36px;min-height:36px;padding:0;border:1px solid #ffffff1c;border-radius:50%;font-size:20px;color:#a99aad;transition:background .2s,color .2s}
.slot-tools .remove-file:hover{background:#ffffff0b;color:#fff}
.file-entry{padding:0;gap:8px}
.file-entry strong{font-size:12px}
.file-ready{display:none}
#file-list .file-entry+.file-entry{padding-top:6px}
#file-list{max-height:120px}
.intake-actions{margin-top:20px}

#file-hint{margin-top:2px}
@media(max-width:700px){
 .models{margin-bottom:20px}
 .loaded-slot{padding:12px;gap:10px}
 .slot-tools{gap:8px}
 .slot-tools button{font-size:11px;min-height:44px}
 .slot-tools .remove-file{width:34px;height:34px;min-height:34px}
 .slot-label{font-size:11px}
 .file-entry strong{font-size:12px}
}

body[data-loading=reference] .reference-button{position:relative;overflow:hidden;opacity:1;color:#dfc5ec}
body[data-loading=reference] .reference-button:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent,#dbc1f233,transparent);animation:intake-sweep 1.5s ease-in-out infinite}
.models>button:focus-visible{outline-offset:-3px}

/* One playback dock appears only on the finished result. */
body[data-has-player=true] main{padding-bottom:calc(var(--player-height,140px) + 24px)}
body[data-has-player=true] .action-area{position:fixed;inset:auto auto 0 50%;transform:translateX(-50%);width:var(--shell);margin:0;padding:0 0 calc(12px + env(safe-area-inset-bottom,0px));z-index:5;background:#0b0c0ef5;backdrop-filter:blur(18px);box-shadow:0 -20px 30px #0b0c0eaa}
body[data-has-player=true] .transport{padding:18px 0}
body[data-has-player=true] .bottom-line{padding-top:10px}
html{scroll-padding-bottom:180px}
@media(max-width:700px){
 body[data-has-player=true] .action-area{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
 body[data-has-player=true] .transport{grid-template-columns:minmax(0,1fr) auto;gap:12px 10px;padding:12px 0 10px}
 body[data-has-player=true] .track{grid-row:1;grid-column:1;gap:0}
 body[data-has-player=true] .file-mark{display:none}
 body[data-has-player=true] .track strong{max-width:100%;font-size:11px}
 body[data-has-player=true] .ab{grid-row:1;grid-column:2;justify-self:end;padding:3px;border-radius:7px}
 body[data-has-player=true] .ab button{min-width:46px;min-height:38px;padding:8px;font-size:10px}
 body[data-has-player=true] .playback{grid-row:2;grid-column:1/-1;gap:12px}
 body[data-has-player=true] .play{width:40px;height:40px}
 body[data-has-player=true] .bottom-line{padding-top:8px;align-items:center}
 body[data-has-player=true] #format-info{display:none}
}

/* Downloads belong to the result; playback lives in the single bottom player. */
.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.result-actions #download{min-width:0;justify-content:center;font-size:13px;height:50px;padding:0 15px}
.result-actions #download-mp3{font-size:13px;height:50px;padding:0 15px;background:#211a2b88;border-color:#bfa2d455}
.result-actions #download:only-child{grid-column:1/-1}
@media(max-width:700px){.result-actions{gap:9px}.result-actions #download,.result-actions #download-mp3{font-size:12px;padding:0 10px}}

#scene-dissolve{pointer-events:none;opacity:0}
.result-actions:has(#download-mp3[hidden]){grid-template-columns:1fr}

/* A quiet archive focus treatment and consistent leading process marks. */
#archive>summary:focus{outline:none}
#archive>summary:focus-visible{box-shadow:inset 0 -2px 0 var(--accent);color:#f4edf7}
#archive>summary:hover{color:#f4edf7}
#archive-log{padding-top:8px}
.log-row,.story-line{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;align-items:start}
.log-check{display:inline-flex;width:16px;height:20px;align-items:center;color:#fff;flex:none}
.log-check svg{display:block;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#archive-log .log-check{height:15px}
/* The owner headline gets three deliberate lines, without tight letter spacing. */
.title-block{width:560px;max-width:calc(100vw - 112px)}
h1{font-size:clamp(46px,4vw,56px);line-height:1.12;letter-spacing:-.045em}
.headline-line{display:block;white-space:nowrap}
@media(max-width:1050px) and (min-width:701px){h1{font-size:45px}.title-block{width:520px;max-width:calc(100vw - 70px)}}
@media(max-width:700px){.title-block{width:100%;max-width:100%}body:not(.lang-hi) h1{font-size:clamp(25px,7.7vw,40px);line-height:1.15;letter-spacing:-.04em}}

/* Playback belongs to the result; the music timeline rises beside the sound. */
body[data-has-player=true] main{padding-bottom:30px}
body[data-has-player=true] .action-area{position:static;inset:auto;transform:none;width:100%;margin:0 0 24px;padding:0;background:none;backdrop-filter:none;box-shadow:none;z-index:auto}
body[data-has-player=true] .transport{display:flex;align-items:center;justify-content:flex-start;gap:16px;border:0;padding:12px 0 0}
body[data-has-player=true] .track{display:flex;gap:0;margin-top:0}
body[data-has-player=true] .track strong{max-width:100%;font-size:12px}
body[data-has-player=true] .track small{margin-top:4px}
body[data-has-player=true] .play{width:46px;height:46px}
body[data-has-player=true] .ab{justify-self:auto;flex:1;max-width:250px;margin:0}
body[data-has-player=true] .ab button{flex:1;min-height:40px;padding:9px 16px;font-size:12px}
body[data-has-player=true] .bottom-line{padding-top:12px;align-items:center;gap:12px}
.action-area #format-info{display:none}
.action-area .process-guide{margin-right:0;font-size:9px}
body[data-phase=result] .scene-caption{display:none}
#scrubber{position:fixed;z-index:6;right:max(24px,calc((100vw - 1320px)/2));top:50%;transform:translateY(-40%);width:54px;height:clamp(220px,38vh,380px);margin:0;flex:none;min-width:0;background:#0b0c0e52;border-radius:28px}
#scrubber #wave{width:100%;height:100%;display:block}
#scrubber #seek{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;writing-mode:vertical-lr;direction:rtl;cursor:ns-resize;touch-action:none}
#scrubber:focus-within{box-shadow:0 0 0 1px #cbb7ea55}
#scrubber .times{position:absolute;inset:-24px -8px;display:flex;flex-direction:column-reverse;align-items:center;justify-content:space-between;pointer-events:none;font-size:10px;margin:0;color:#b6a8c3}
@media(max-width:700px){
 #scrubber{position:absolute;right:9px;top:337px;transform:none;width:44px;height:146px;background:#0b0c0e66;border-radius:22px}
 #scrubber .times{inset:-17px -4px;font-size:9px}
 body[data-has-player=true] .action-area{margin-bottom:22px;padding:0}
 body[data-has-player=true] .transport{display:flex;gap:14px;padding:12px 0 0}
 body[data-has-player=true] .play{width:46px;height:46px}
 body[data-has-player=true] .ab{display:flex;flex:1;max-width:none;padding:4px}
 body[data-has-player=true] .ab button{min-height:40px;font-size:12px;padding:9px 14px}
 body[data-has-player=true] .bottom-line{padding-top:12px}
}

/* Finished masters get an immersive listening view, without the intake headline. */
body[data-phase=result] .title-block{display:none}
body[data-phase=processing] .title-block{position:absolute;top:48px;left:0;pointer-events:none;animation:headline-exit .5s ease forwards}
@keyframes headline-exit{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-12px);visibility:hidden}}
@media(prefers-reduced-motion:reduce){body[data-phase=processing] .title-block{display:none}}
body:is([data-phase=processing],[data-phase=result]) main{min-height:calc(100svh - 100px)}
body:is([data-phase=processing],[data-phase=result]) .workspace{padding-top:clamp(180px,27svh,300px);padding-bottom:32px}
body:is([data-phase=processing],[data-phase=result]) #result{background:linear-gradient(115deg,#0b0c0eb3,#0b0c0e30);border-radius:0 0 18px 18px}
body:is([data-phase=processing],[data-phase=result]) .vignette{background:linear-gradient(90deg,#0b0c0e88,transparent 46%),linear-gradient(180deg,#0b0c0e66,transparent 20%,transparent 76%,#0b0c0eb3)}
@media(max-width:700px){
 body:is([data-phase=processing],[data-phase=result]){--result-scene:clamp(300px,43svh,390px)}
 body:is([data-phase=processing],[data-phase=result]) main{min-height:calc(100svh - 116px)}
 body[data-phase=processing] .title-block{top:29px}
 body:is([data-phase=processing],[data-phase=result]) .workspace{padding-top:0;padding-bottom:24px}
 body:is([data-phase=processing],[data-phase=result]) #work-panel{margin-top:var(--result-scene);background:#0b0c0ef0}
 body:is([data-phase=processing],[data-phase=result]) #stage,body:is([data-phase=processing],[data-phase=result]) #scene-dissolve{top:116px;height:var(--result-scene);min-height:0}
 body:is([data-phase=processing],[data-phase=result]) .vignette{top:116px;height:var(--result-scene);min-height:0;background:linear-gradient(180deg,#0b0c0e44,transparent 12%,transparent 78%,#0b0c0e)}
 body:is([data-phase=processing],[data-phase=result]) #scrubber{top:calc(116px + var(--result-scene)/2 - 75px);height:150px}
 body:is([data-phase=processing],[data-phase=result]) #result{background:none;padding-top:18px}
}

/* The next song is a top-level action, not a footnote below the archive. */
.new-master-button{display:none}
body[data-phase=result] header .new-master-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 18px;border:1px solid #c9b8e377;border-radius:24px;background:#272132d9;color:#f1e6fc;font-size:13px;font-weight:500;white-space:nowrap;margin-left:auto}
body[data-phase=result] header .new-master-button:hover{background:#3c304b;border-color:#d9c5f5}
body[data-phase=result] header .header-right{margin-left:0}
@media(max-width:700px){
 body[data-phase=result] header{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:44px 44px;gap:7px 10px;align-content:center}
 body[data-phase=result] header>a{grid-row:1;grid-column:1}
 body[data-phase=result] header .header-right{grid-row:1;grid-column:2;justify-self:end}
 body[data-phase=result] header nav{grid-row:2;grid-column:1;width:100%;min-width:0;padding:0;gap:0}
 body[data-phase=result] header nav button{padding:10px 6px;font-size:11px;min-width:0}
 body[data-phase=result] header .new-master-button{grid-row:2;grid-column:2;font-size:12px;min-height:40px;padding:0 13px;margin:0}
}

/* The same light room becomes a screening room. Picture and audio controls stay together. */
#screen-room{position:absolute;right:0;top:110px;width:calc(100% - 480px);z-index:3;padding:20px 54px 20px 16px;isolation:isolate}
#screen-room:before{content:"";position:absolute;inset:12% 4% 16%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,#b29ce62b,transparent 68%);filter:blur(24px);opacity:.4;transition:opacity 2.8s}
body[data-view=after] #screen-room:before{opacity:1}
.screen-meta{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:9px;color:#a79aaf;margin:0 0 18px;letter-spacing:.13em}
#video-metadata{letter-spacing:0;white-space:nowrap;font:10px ui-monospace,monospace;color:#8e859a}
#video-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:180px}
.video-frame{position:relative;width:min(100%,calc(52svh * var(--video-ratio,1.7778)));aspect-ratio:var(--video-ratio,1.7778);border:1px solid #d3b9ed4d;border-radius:12px;overflow:hidden;background:#09090b;box-shadow:0 24px 65px #0008,0 0 35px #b7a0e31a;transition:box-shadow 2.8s,border-color 2.8s}
body[data-view=after] .video-frame{border-color:#d9b9f880;box-shadow:0 24px 65px #0008,0 0 48px #bf92ec36}
#video-picture{display:block;width:100%;height:100%;object-fit:contain;background:#09090b}
#video-badge{position:absolute;top:13px;left:13px;font-size:10px;background:#0a0912b8;backdrop-filter:blur(10px);padding:8px 11px;border:1px solid #ffffff20;border-radius:20px;color:#eee2f5}
#video-fullscreen{position:absolute;right:9px;bottom:9px;width:40px;height:40px;border-radius:50%;background:#0b0914b3;backdrop-filter:blur(10px);font-size:23px;color:#fff}
#video-player{max-width:560px;margin:22px auto 0}
#video-player .track{display:none!important}
#video-player .transport{padding:0!important;justify-content:center!important}
#video-player .ab{max-width:320px}
#video-player .bottom-line{justify-content:center!important}
body[data-has-player=true] #video-player .action-area{margin:0}
#video-note{text-align:center;color:#a295ad;font-size:11px;line-height:1.5;margin:13px 0 0}
#video-timeline #scrubber{position:absolute;right:-51px;top:50%;transform:translateY(-50%);width:38px;height:clamp(120px,23svh,230px);max-height:80%;background:#100e1988}
#video-timeline #scrubber #seek{min-width:44px;left:-3px}
#screen-room:fullscreen{position:fixed;inset:0;width:100%;height:100%;background:#0b0c0e;padding:24px 70px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:auto}
#screen-room:fullscreen .screen-meta{width:min(100%,1000px)}
#screen-room:fullscreen #video-stage{width:min(100%,1000px)}
#screen-room:fullscreen .video-frame{width:min(100%,calc(68svh * var(--video-ratio,1.7778)))}
#screen-room:fullscreen #video-player{width:min(100%,520px);margin-top:10px}
#screen-room:fullscreen #video-note{margin:0}
body[data-has-video=true] .scene-caption{display:none}
body[data-mode=video][data-has-video=true] #stage,body[data-mode=video][data-has-video=true] #scene-dissolve{opacity:.48;transition:opacity 1s}
.process-context{display:flex;gap:8px;align-items:center;margin:18px 0 4px;min-width:0}
.process-context span{border:1px solid #dbc0f425;border-radius:5px;padding:6px 8px;font-size:9px;color:#c3b2d2;background:#1c172380}
#context-track{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#context-stage{flex:none;font-size:8px;letter-spacing:.08em;color:var(--accent)}
body:not([data-mode=single]) .story-line{transform:translateY(calc(var(--age)*-69px));font-size:13px;min-height:54px}
body:not([data-mode=single]) #live-log{height:237px}
.process-value{display:block;font:10px/1.5 ui-monospace,monospace;color:#b7a8c9;margin-top:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
#album-scene-label{position:absolute;left:calc(50% + 80px);right:70px;top:72%;text-align:center;z-index:4}
#album-scene-label>span{font-size:9px;letter-spacing:.18em;color:#ad9aba}
#album-scene-track{display:block;font-size:15px;font-weight:400;margin-top:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e3d3ed}
#album-ribbon-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:15px}
#album-ribbon-buttons button{width:36px;height:40px;border-bottom:1px solid #ffffff33;font:10px ui-monospace,monospace;color:#ab98bb}
#album-ribbon-buttons [aria-pressed=true]{border-color:var(--accent);color:#f2dfff;text-shadow:0 0 12px var(--accent)}
#album-tracks{display:grid;gap:0;border-top:1px solid #ffffff18;margin-top:24px}
#album-tracks button{border:0;border-bottom:1px solid #ffffff12;border-radius:0;text-align:left;min-height:44px;padding:12px;font-size:12px}
#album-tracks button[aria-pressed=true]{background:linear-gradient(90deg,#bb91df1f,transparent);color:#f1ddff}
#mode-confirm{padding:30px;max-width:440px}
#mode-confirm h2{font-size:28px;margin:0 0 14px}
#mode-confirm .eyebrow{font-size:9px;margin-bottom:20px}
#mode-confirm p{margin:0;color:#b6acbf}
.confirm-actions{display:flex;gap:10px;margin-top:26px}
.confirm-actions button{min-width:0;flex:1;justify-content:center;font-size:12px;height:46px;padding:0 12px}
@media(min-width:701px) and (max-width:1100px){#screen-room{width:calc(100% - 400px);padding-right:44px;padding-left:0;top:130px}.screen-eyebrow{letter-spacing:.04em;font-size:8px}.screen-meta{flex-wrap:wrap;gap:6px}.video-frame{width:min(100%,calc(48svh * var(--video-ratio,1.7778)))}#album-scene-label{left:58%;right:55px}}
@media(max-width:700px){
 body[data-has-video=true] main{display:flex;flex-direction:column}
 body[data-has-video=true] .workspace{display:contents}
 body[data-has-video=true] .title-block{order:1;margin-top:26px}
 body[data-has-video=true] #screen-room{position:relative;inset:auto;width:100%;order:2;padding:0 40px 0 0;margin:28px 0 0}
 body[data-has-video=true] #work-panel{order:3;margin-top:27px;background:linear-gradient(180deg,#0b0c0ee6,#0b0c0ef5);padding:18px 0 24px}
 body[data-has-video=true] #status{order:4;margin-bottom:20px}
 body[data-has-video=true]:is([data-phase=processing],[data-phase=result]) #screen-room{margin-top:24px}
 body[data-has-video=true]:is([data-phase=processing],[data-phase=result]) .title-block{position:absolute;top:0;left:0}
 .screen-meta{display:block;margin-bottom:12px;font-size:8px;line-height:1.6}
 #video-metadata{display:block;margin-top:3px;font-size:9px}
 .video-frame{width:min(100%,calc(49svh * var(--video-ratio,1.7778)));border-radius:10px}
 #video-stage{min-height:120px}
 #video-badge{top:8px;left:8px;font-size:9px;padding:6px 9px}
 #video-fullscreen{width:36px;height:36px;font-size:21px;right:6px;bottom:6px}
 #video-player{margin-top:18px;margin-right:-40px}
 #video-note{font-size:10px;margin:14px -40px 0 0}
 #video-timeline #scrubber{right:-36px;width:28px;height:clamp(90px,20svh,150px);max-height:70%}
 #video-timeline #scrubber #seek{left:-8px}
 #video-player .play{width:44px;height:44px}
 #video-player .ab{max-width:none}
 #video-player .ab button{min-width:0}
 #screen-room:fullscreen{padding:16px 44px 16px 16px;margin:0!important;display:flex!important}
 #screen-room:fullscreen .video-frame{width:min(100%,calc(65svh * var(--video-ratio,1.7778)))}
 #screen-room:fullscreen #video-player,#screen-room:fullscreen #video-note{margin-right:0}
 body[data-has-video=true] .vignette{opacity:.6}
 #album-scene-label{left:25px;right:55px;top:calc(var(--result-scene,390px) - 95px);text-shadow:0 2px 12px #000}
 body[data-mode=album][data-phase=setup] #album-scene-label{top:310px}
 #album-scene-label>span{font-size:8px}
 #album-scene-track{font-size:12px;margin-top:8px}
 #album-ribbon-buttons{gap:4px;margin-top:8px}
 #album-ribbon-buttons button{width:26px;height:32px;font-size:9px}
 #mode-confirm{padding:25px}.confirm-actions{flex-direction:column}.confirm-actions button{flex:auto}
 body:not([data-mode=single]) .story-line{font-size:12px}
}

/* Video aspect ratio comes from the file; picture, seek bar and transport share one width. */
#screen-room{--media-width:min(100%,calc(52svh * var(--video-ratio,1.7778)));display:flex;flex-direction:column;align-items:center;padding:20px 0 20px 28px}
#screen-room .screen-meta,#screen-room #video-stage,#screen-room #video-player,#screen-room #video-timeline,#screen-room #video-note{width:var(--media-width);max-width:100%}
#screen-room .video-frame{width:100%}
#screen-room #video-player{margin:20px 0 0}
#screen-room #video-note{margin:13px 0 0}
#video-timeline{margin:20px 0 0;height:58px}
#video-timeline #scrubber{position:relative;inset:auto;transform:none;width:100%;height:38px;max-height:none;border-radius:5px;background:transparent}
#video-timeline #scrubber #wave{width:100%;height:38px}
#video-timeline #scrubber #seek{inset:-4px 0 0;left:0;width:100%;min-width:0;height:46px;writing-mode:horizontal-tb;direction:ltr;cursor:ew-resize}
#video-timeline #scrubber .times{inset:42px 0 auto;height:15px;flex-direction:row;font-size:10px}
#screen-room:fullscreen{--media-width:min(100%,calc(60svh * var(--video-ratio,1.7778)));padding:24px;gap:0}
#screen-room:fullscreen #video-stage{width:var(--media-width)}
#screen-room:fullscreen .video-frame{width:100%}
#screen-room:fullscreen #video-player{width:var(--media-width);margin-top:15px}
@media(max-width:700px){
 body[data-has-video=true] #screen-room{--media-width:min(100%,calc(48svh * var(--video-ratio,1.7778)));padding:0;margin-top:22px}
 #screen-room .screen-meta{font-size:8px}
 #screen-room #video-player{margin:16px 0 0}
 #screen-room #video-note{margin:12px 0 0}
 #video-timeline{margin-top:14px;height:53px}
 #video-timeline #scrubber{height:34px;max-height:none;width:100%;right:auto;top:auto;transform:none}
 #video-timeline #scrubber #wave{height:34px}
 #video-timeline #scrubber #seek{left:0;inset:-5px 0 0;height:44px}
 #video-timeline #scrubber .times{inset:38px 0 auto;font-size:9px}
 #video-player .transport{gap:10px!important}
 #video-player .ab button{font-size:11px!important;padding:8px 10px!important}
 body[data-has-video=true] #work-panel{margin-top:26px;padding-top:0}
 body[data-has-video=true] #stage,body[data-has-video=true] #scene-dissolve{opacity:.28}
 #screen-room:fullscreen{--media-width:min(100%,calc(58svh * var(--video-ratio,1.7778)));padding:18px!important;margin:0!important}
}

/* A clear task heading remains above the processing details. */
#processing-title{font-size:clamp(27px,2.8vw,36px);line-height:1.14;letter-spacing:-.04em;font-weight:450;margin:2px 0 24px;color:#f4f0ea}
@media(max-width:700px){#processing-title{font-size:28px;margin-bottom:22px}}
