:root{--cream: #f4eedc;--black: #050505;--opacity-100: 1;--opacity-85: .85;--opacity-62: .62;--opacity-45: .45;--opacity-42: .42;--opacity-38: .38;font-family:IBM Plex Mono,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-weight:400;color-scheme:light dark}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}body{background:var(--black)}*{box-sizing:border-box}button,select{font:inherit;font-weight:400}[lang=zh] body,[lang=zh] button,[lang=zh] select{font-family:Noto Sans Mono CJK SC,PingFang SC,Microsoft YaHei,monospace}[lang=ja] body,[lang=ja] button,[lang=ja] select{font-family:Noto Sans Mono CJK JP,Hiragino Sans,Yu Gothic,monospace}[lang=ar] body,[lang=ar] button,[lang=ar] select{font-family:Noto Naskh Arabic,Geeza Pro,Courier New,monospace}.app-shell{--page-background: var(--cream);--page-foreground: var(--black);--page-accent: var(--black);position:relative;display:grid;grid-template-columns:minmax(0,1fr);width:100vw;height:100dvh;overflow:hidden;background:var(--black);color:var(--page-foreground)}.scene{position:relative;min-width:0;height:100%;overflow:hidden;background:var(--black);border:0}.scene-plane{--layout-aspect: 1.4142135624;position:absolute;inset-block-start:50%;inset-inline-start:50%;display:grid;width:max(100%,calc(100dvh * var(--layout-aspect)));aspect-ratio:var(--layout-aspect);gap:0;background:var(--black);transform:translate(-50%,-50%);animation:optical-cut .42s steps(2,end)}.scene-loading,.scene-cell{min-width:0;min-height:0;background:transparent;color:var(--page-foreground)}.scene-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;opacity:var(--opacity-45)}.scene-cell{--cell-opacity: var(--opacity-85);--cell-accent: var(--page-accent);position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--cell-accent) 45%,transparent);border-radius:2px;opacity:var(--cell-opacity)}.scene-cell[data-format=a5],.scene-cell[data-format=a6],.scene-cell[data-format=a7]{background:transparent}.scene-cell[data-background=true]{z-index:0}.scene-cell:not([data-background=true]){z-index:1}.scene-cell[data-opacity="100"]{--cell-opacity: var(--opacity-100)}.scene-cell[data-opacity="85"]{--cell-opacity: var(--opacity-85)}.scene-cell[data-opacity="62"]{--cell-opacity: var(--opacity-62)}.scene-cell[data-opacity="45"]{--cell-opacity: var(--opacity-45)}.scene-cell[data-opacity="42"]{--cell-opacity: var(--opacity-42)}.scene-cell[data-opacity="38"]{--cell-opacity: var(--opacity-38)}.scene-cell:focus-visible,button:focus-visible,select:focus-visible{outline:1px solid var(--cell-accent, var(--page-accent));outline-offset:-2px}.scene-cell picture,.scene-cell img,.scene-cell video,.scene-cell iframe,.sketch-host,.sketch-host canvas{display:block;width:100%;height:100%}.sketch-host{position:relative;z-index:2}.cell-visual{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.cell-visual-backdrop{opacity:var(--opacity-62)}.scene-cell img,.scene-cell video,.scene-cell iframe{object-fit:cover;filter:saturate(.82) contrast(1.08)}.scene-cell picture img{display:block;width:100%;height:100%}.scene-cell iframe{border:0}.scene-cell:after{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;content:"";opacity:0}.scene-cell[data-gradient=field]:after{opacity:var(--opacity-38);background:linear-gradient(135deg,transparent 0%,color-mix(in srgb,var(--cell-accent) 42%,transparent) 56%,transparent 100%)}.scene-cell[data-gradient=cut]:after{opacity:var(--opacity-42);background:linear-gradient(90deg,transparent 0%,transparent 48%,var(--cell-accent) 48%,var(--cell-accent) 49%,transparent 49%)}.cell-caption{position:absolute;z-index:3;inset-inline:8px;inset-block-end:7px;display:flex;justify-content:space-between;gap:8px;color:var(--cell-accent);font-size:clamp(.62rem,.8vw,.72rem);line-height:1.2;opacity:var(--opacity-62);text-transform:uppercase}.fragment{position:relative;z-index:2;display:flex;height:100%;flex-direction:column;justify-content:space-between;gap:16px;padding:clamp(12px,2vw,24px);color:var(--cell-accent)}.fragment-label,.void-cell{font-size:clamp(.62rem,.8vw,.75rem);line-height:1.2;opacity:var(--opacity-45);text-transform:uppercase}.fragment p{max-width:34ch;margin:0;font-size:clamp(.92rem,1.45vw,1.45rem);line-height:1.28;opacity:var(--opacity-85)}.void-cell{position:relative;z-index:2;display:grid;height:100%;place-items:center;color:var(--page-accent)}.eyebrow{color:var(--page-accent);opacity:var(--opacity-62)}.control-stack{display:flex;flex-direction:column;gap:9px;padding-block:14px}.control-stack label,.toggle-button,.command-button{display:grid;gap:5px}.control-stack label>span,.toggle-button span:first-child{font-size:.68rem;line-height:1.1;opacity:var(--opacity-62)}select,button{width:100%;min-height:32px;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--page-foreground) 62%,transparent);border-radius:2px;background:transparent;color:var(--page-foreground)}select{padding:0 7px}button{cursor:pointer;padding:7px;text-align:start}button:hover,select:hover{border-color:var(--page-accent)}.toggle-button{grid-template-columns:1fr auto;align-items:center}.toggle-button span:last-child{color:var(--page-accent);font-size:.7rem;opacity:var(--opacity-85)}.command-button{color:var(--page-accent)}.content-error{position:absolute;inset-inline-start:12px;inset-block-end:12px;margin:0;padding:6px 8px;border:1px solid var(--page-foreground);background:transparent;color:var(--page-foreground);font-size:.75rem;opacity:var(--opacity-85)}[dir=rtl] button{text-align:end}@media(max-width:980px){.app-shell{display:block;width:100vw;height:100dvh}.scene{width:100vw;height:100dvh;border:0}.scene-plane{width:max(100%,calc(100dvh * var(--layout-aspect)))}.fragment p{max-width:24ch;font-size:clamp(.82rem,3.2vw,1.05rem)}.cell-caption{inset-inline:6px;inset-block-end:6px;font-size:.58rem}}@media(max-width:560px){.scene{gap:0}.scene-cell{border-color:color-mix(in srgb,var(--page-accent) 38%,transparent)}.fragment{padding:9px}.control-stack{gap:8px}}@media(prefers-reduced-motion:reduce){.scene-plane{animation:none}}@keyframes optical-cut{0%{filter:contrast(1.32) brightness(.82)}42%{filter:contrast(1.08) brightness(1.02)}to{filter:none}}
