@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600;650;700&family=IBM+Plex+Mono:wght@400;500&display=swap";:root{color:#e7e8e3;font-synthesis:none;--muted:#777d76;--line:#2a2c28;--accent:#ea522e;--mono:"IBM Plex Mono",monospace;background:#111211;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{margin:0}.app{max-width:1600px;margin:auto;padding:0 48px}button,a,input,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:5px}header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:86px;display:flex}.wordmark{letter-spacing:-1.1px;color:inherit;font-size:23px;font-weight:700;text-decoration:none}.wordmark>span:first-child{color:var(--accent)}.index{font:11px var(--mono);color:var(--muted);letter-spacing:0;margin-left:12px}.header-note,.source-link,.eyebrow,.panel-meta,.media-tag,.details,footer{font:10px var(--mono);letter-spacing:1px}.header-note{color:#aaa}.status-dot{background:var(--accent);vertical-align:2px;border-radius:50%;width:5px;height:5px;margin-right:9px;display:inline-block}.source-link{color:#b6bab1;letter-spacing:0;text-decoration:none}.source-link span{margin-left:10px;font-size:17px}.intro{justify-content:space-between;align-items:end;padding:33px 0 28px;display:flex}.eyebrow{color:var(--muted);letter-spacing:1.5px;margin-bottom:12px;font-size:9px}h1{letter-spacing:-1.4px;margin:0;font-size:clamp(25px,2.5vw,38px);font-weight:450}h1>span{color:var(--accent)}.intro p{color:#959b92;margin:0 0 2px;font-size:12px;line-height:1.8}.comparison{grid-template-columns:1fr 1fr;gap:20px;display:grid}.panel-title{border-top:1px solid var(--line);justify-content:space-between;align-items:center;height:42px;display:flex}h2{margin:0;font-size:12px;font-weight:500}h2>span{font:10px var(--mono);color:var(--muted);margin-right:12px}.panel-meta{color:#858b80;letter-spacing:.6px;font-size:8px}.panel-meta i{background:#a9bc8f;border-radius:50%;width:4px;height:4px;margin-right:5px;display:inline-block}.viewport{background:#000;border:1px solid #262823;justify-content:center;align-items:center;height:clamp(360px,58vh,780px);display:flex;position:relative;overflow:hidden}.viewport video,.viewport canvas{aspect-ratio:9/16;object-fit:contain;width:auto;max-width:100%;height:100%;display:block}.media-tag{letter-spacing:1px;color:#757970;pointer-events:none;font-size:8px;position:absolute;bottom:16px;left:17px}#render-error{color:var(--accent);font-size:14px;line-height:1.6;position:absolute;inset:30%}.transport{border:1px solid var(--line);background:#181a17;align-items:center;gap:19px;margin-top:20px;padding:18px 21px 15px;display:flex}.play{background:var(--accent);color:#111;border:0;border-radius:50%;flex-shrink:0;place-items:center;width:37px;height:37px;display:grid}.play svg{fill:currentColor;width:19px;height:19px}.icon-button{color:#acb1a6;background:0 0;border:0;padding:0;font-size:23px}.clock{white-space:nowrap;font:10px var(--mono);margin-right:4px}.dim{color:#687061}.scrubber{flex:1;min-width:50px;padding-top:14px}input[type=range]{--progress:0%;appearance:none;background:linear-gradient(to right,var(--accent) var(--progress),#393e34 var(--progress));cursor:pointer;width:100%;height:3px;margin:0;display:block}input[type=range]::-webkit-slider-thumb{appearance:none;background:#e5e8df;border-radius:50%;width:9px;height:9px}input[type=range]::-moz-range-thumb{background:#e5e8df;border:0;border-radius:50%;width:9px;height:9px}.ticks{color:#697061;font:8px var(--mono);justify-content:space-between;margin-top:8px;display:flex}select{color:#bdc4b4;font:10px var(--mono);cursor:pointer;background:0 0;border:0;padding:6px}select option{background:#181a17}.text-button{color:#818878;white-space:nowrap;font:10px var(--mono);background:0 0;border:0;padding:6px 0}.text-button.active{color:#d7ddcc}.details{color:#737b69;letter-spacing:.6px;justify-content:space-between;padding:16px 0 25px;font-size:8px;display:flex}.details>div{align-items:center;gap:15px;display:flex}.details .status-dot{vertical-align:1px;background:#8e9c7b;width:4px;height:4px}.details button{color:#949d88;font:8px var(--mono);letter-spacing:.6px;background:0 0;border:0;padding:0}.details button span{color:#d0d8c4;margin-left:5px}.divider{background:var(--line);width:1px;height:10px}footer{border-top:1px solid var(--line);color:#727869;letter-spacing:.8px;justify-content:space-between;padding:20px 0 24px;font-size:8px;display:flex}.footer-slash{color:#454d3d;margin:0 10px}footer>span:last-child{letter-spacing:0;color:#676f5e}kbd{font:8px var(--mono);color:#939e84;border:1px solid #353b30;border-radius:3px;margin-left:12px;padding:3px 5px}@media (width>=1600px){.viewport{height:66vh;max-height:950px}}@media (width<=800px){.app{padding:0 20px}.header-note{display:none}.intro{padding:26px 0}.intro p{font-size:10px}.comparison{gap:10px}.viewport{aspect-ratio:9/16;height:auto}.viewport video,.viewport canvas{width:100%;height:100%}.panel-meta{display:none}.transport{gap:12px;padding:14px 12px}.clock,.text-button{font-size:9px}#sound{display:none}.details{font-size:7px}.details>div{gap:8px}.details>span{max-width:110px;line-height:1.6}footer>span:last-child{text-align:right;max-width:240px;line-height:2}h2{font-size:10px}h2>span{margin-right:6px}}@media (width<=480px){.app{padding:0 12px}.intro p{display:none}header{height:66px}.transport{gap:9px}.clock{display:none}.media-tag{font-size:6px;bottom:10px;left:9px}.details>div>span:last-child,.details>div>.divider:last-of-type{display:none}footer>span:last-child{max-width:170px}.play{width:30px;height:30px}}.inspection-bar{color:#93998b;justify-content:space-between;align-items:center;gap:16px;padding:15px 0 0;font-size:11px;display:flex}.inspection-bar>div:first-child{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.inspection-badge{color:#f29378;white-space:nowrap;background:#ea522e12;border:1px solid #ea522e38;padding:6px 9px;font-size:11px}.inspection-actions{flex-shrink:0;align-items:center;gap:17px;display:flex}.inspection-actions button{color:#cbd1c1;white-space:nowrap;background:0 0;border:0;padding:5px 0;font-size:11px}.inspection-actions button:disabled{color:#555e4d;cursor:default}#show-guide span{width:16px;height:16px;font:10px var(--mono);border:1px solid #66705b;border-radius:50%;place-items:center;margin-left:4px;display:inline-grid}.inspectable canvas{cursor:grab;touch-action:none}.inspectable canvas:active{cursor:grabbing}.inspection-guide{z-index:2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#e3e8dd;background:#1e231def;border:1px solid #677158;width:calc(100% - 40px);max-width:350px;padding:22px;position:absolute;bottom:42px;left:50%;transform:translate(-50%);box-shadow:0 16px 50px #0008}.inspection-guide[hidden]{display:none}.guide-eyebrow{font:9px var(--mono);letter-spacing:1px;color:#ef896b;justify-content:space-between;display:flex}.guide-eyebrow span{color:#717e64}.inspection-guide h3{letter-spacing:-.6px;margin:16px 0 9px;font-size:22px;font-weight:500}.inspection-guide p{color:#aeb9a3;margin:0;font-size:11px;line-height:1.8}.inspection-guide ul{margin:15px 0 10px;padding:0;list-style:none}.inspection-guide li{border-bottom:1px solid #ffffff13;justify-content:space-between;gap:12px;padding:10px 0;font-size:11px;display:flex}.inspection-guide li span{color:#99a48c}.inspection-guide li b{white-space:nowrap;font-weight:500}.inspection-guide .touch-help{color:#7f8f70;font-size:10px}.guide-footer{margin-top:18px}.guide-footer p{font-size:10px}.guide-footer button{color:#171d12;text-align:left;background:#e96642;border:0;width:100%;margin-top:12px;padding:11px 13px;font-size:12px;font-weight:600}.guide-footer button span{float:right}canvas:focus-visible{outline-offset:-2px;outline:1px solid #ef896b}@media (width<=800px){.inspection-bar{flex-direction:column;align-items:start;gap:10px}.inspection-bar>div:first-child{gap:8px}#inspection-hint{font-size:10px}.inspection-actions{align-self:flex-end}.inspection-guide{width:calc(100% - 12px);max-height:calc(100% - 16px);padding:12px;bottom:8px;overflow:auto}.inspection-guide li{gap:5px;padding:6px 0;font-size:9px}.inspection-guide{z-index:10;background:#1e231df7;width:calc(100% - 32px);max-width:380px;max-height:calc(100dvh - 32px);padding:22px;position:fixed;bottom:16px;left:50%;box-shadow:0 0 0 100vmax #0005,0 12px 48px #0009}.inspection-guide h3{margin:14px 0 10px;font-size:22px}.inspection-guide p{font-size:12px}.inspection-guide li{padding:10px 0;font-size:11px}.inspection-guide .guide-eyebrow{letter-spacing:1px;font-size:9px}.inspection-guide ul{margin:14px 0 10px}.guide-footer{margin-top:16px}.guide-footer button{margin-top:10px;padding:12px}.inspection-guide .touch-help,.guide-footer p{font-size:11px}}.source-credit{color:#b9c0b0;padding:13px 0 3px;font-size:11px;line-height:1.5}.source-credit a{color:#dbdfd4;text-underline-offset:4px;text-decoration:none}.source-credit a:hover{color:#ef896b;text-decoration:underline}.source-credit a span{color:#ea7656;margin-left:7px}.source-credit p{color:#7f8974;margin:4px 0 0;font-size:10px}.reconstruction-credit>span{color:#b9c0b0}@media (width<=600px){.source-credit{min-height:76px;font-size:10px}.source-credit p{font-size:9px}.source-credit a span{margin-left:2px}}.profile-link-row{justify-content:flex-end;padding-top:20px;display:flex}.profile-link{color:#bac2b0;font:11px var(--mono);align-items:center;gap:9px;padding:5px 0;text-decoration:none;display:inline-flex}.profile-link>span:last-child{color:#e97c5a}.profile-link:hover{color:#f0f2eb}.profile-link-row+.intro{padding-top:14px}@media (width<=600px){.profile-link-row{padding-top:14px}.profile-link{font-size:10px}}.original-video-link{color:inherit;text-decoration:none}.original-video-link>span{color:#e97c5a;margin-left:4px}.original-video-link:hover{text-underline-offset:4px;text-decoration:underline}.x-profile-button{color:#dfe5d6;font:11px var(--mono);white-space:nowrap;background:#1b1e18;border:1px solid #454b3f;border-radius:16px;align-items:center;gap:12px;padding:12px 16px;text-decoration:none;transition:background .15s,border-color .15s;display:inline-flex}.x-profile-button>span:first-child{font-size:17px}.x-profile-button>span:last-child{color:#e97c5a}.x-profile-button:hover{background:#272c22;border-color:#849174}@media (width<=600px){.intro{flex-wrap:wrap;gap:18px}.x-profile-button{padding:10px 13px;font-size:10px}}.inspection-bar{justify-content:flex-end}.intro{gap:12px;padding:18px 0 16px}.intro .eyebrow{margin-bottom:7px}.x-profile-button{padding:9px 14px}@media (width<=600px){.intro{gap:10px;padding:15px 0 14px}.intro h1{font-size:24px}.x-profile-button{padding:8px 12px}}.viewport>.panel-title{z-index:1;pointer-events:none;background:linear-gradient(#000b,#0000);border:0;align-items:flex-start;height:auto;min-height:52px;padding:16px 17px 20px;position:absolute;inset:0 0 auto}.viewport>.panel-title h2{color:#e7e9e2;text-shadow:0 1px 5px #000}.viewport>.panel-title a{pointer-events:auto}.viewport>.panel-title h2>span{color:#969e8c}@media (width<=600px){.viewport>.panel-title{min-height:40px;padding:11px 9px 20px}.viewport>.panel-title h2{font-size:10px}}.intro h1{letter-spacing:-.6px;font-size:24px}@media (width<=600px){.intro h1{font-size:20px}}.viewport>.panel-title{min-height:0;padding:7px 12px 11px}.viewport>.panel-title h2{font-size:11px;line-height:1.3}.viewport>.panel-title h2>span{margin-right:9px;font-size:9px}@media (width<=600px){.viewport>.panel-title{padding:5px 8px 9px}.viewport>.panel-title h2{font-size:9px}.viewport>.panel-title h2>span{margin-right:5px;font-size:8px}}.try-your-own{border-top:1px solid var(--line);grid-template-columns:210px minmax(0,1fr);gap:30px;padding:26px 0 30px;display:grid}.try-intro h2{letter-spacing:-.4px;margin:2px 0 9px;font-size:19px;font-weight:450}.try-intro p{color:#949d89;margin:0;font-size:11px;line-height:1.6}.prompt-card{background:#191c17;border:1px solid #353c2e;border-radius:10px;padding:15px 18px}.prompt-toolbar{justify-content:space-between;align-items:center;gap:16px;display:flex}.prompt-toolbar>span{font:8px var(--mono);letter-spacing:1.2px;color:#7e8b70}.prompt-toolbar button{color:#d6e0ca;font:10px var(--mono);background:#252b20;border:1px solid #414d34;border-radius:8px;padding:7px 10px}.prompt-toolbar button:hover{color:#f2e3d6;border-color:#bc795a}.prompt-toolbar button span{margin-left:8px}.prompt-card pre{font:11px/1.85 var(--mono);color:#c4ceb7;white-space:pre-wrap;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text;margin:13px 0 0}.prompt-card pre:focus-visible{outline-offset:5px;outline:1px solid #e97c5a}#copy-status{color:#d5a183;margin:0;font-size:10px}#copy-status:not(:empty){margin-top:9px}@media (width<=650px){.try-your-own{grid-template-columns:1fr;gap:14px;padding:20px 0}.try-intro h2{font-size:18px}.prompt-card{padding:13px}.prompt-card pre{font-size:10px}}.reference-download{font:10px var(--mono);color:#dc9a79;margin-top:13px;text-decoration:none;display:inline-block}.reference-download:hover{text-underline-offset:4px;text-decoration:underline}.model-setting{font:10px var(--mono);color:#e1e6d9;background:#22271d;border:1px solid #414a37;border-radius:20px;align-items:center;gap:9px;margin:9px 0 11px;padding:8px 11px;display:inline-flex}.model-setting>span:last-child{color:#a6b298;border-left:1px solid #48523c;padding-left:9px}