:root{color-scheme:light;--bg:#bdc2c9;--ink:#182128;--muted:#4b5963;--accent:#245e55;--line:#263f5226;--panel:#eef0f2ef}*{box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden}body{margin:0;background:var(--bg);color:var(--ink);font-family:"IBM Plex Sans",sans-serif}button,input{font:inherit}button,input{touch-action:manipulation}button{min-height:40px;border:1px solid var(--line);background:#f0f2f2db;color:var(--ink);padding:9px 13px;cursor:pointer;font-size:12px;border-radius:5px;white-space:nowrap}button:hover,button[aria-pressed=true]{border-color:var(--accent);background:#d1e2dc}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button.primary{background:var(--accent);color:white;border-color:var(--accent);font-weight:600}button.primary:hover{background:#327b6e}button:disabled{opacity:.45;cursor:not-allowed}[hidden]{display:none!important}#workbench{position:fixed;inset:0;isolation:isolate}.stage{position:absolute;inset:0;background:radial-gradient(ellipse at 45% 38%,#edf0f4 0%,#c9ced4 52%,#aab2bd 100%)}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.viewer-heading{position:absolute;top:max(20px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:7px;pointer-events:none}.brand{font-size:14px;font-weight:600;letter-spacing:.08em}.brand>span{font-size:10px;font-weight:400;letter-spacing:.05em;margin-left:10px}#view-label{font:8px "IBM Plex Mono",monospace;letter-spacing:.1em;color:var(--muted)}.view-controls{position:absolute;right:max(24px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));display:flex;gap:4px}.view-controls button{font:10px "IBM Plex Mono",monospace;padding:8px 11px;min-height:34px}.tools{position:absolute;bottom:max(33px,calc(env(safe-area-inset-bottom) + 15px));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);display:flex;gap:20px;align-items:center;padding:10px 12px;border:1px solid #ffffff9c;border-radius:10px;background:#e9edf0e8;box-shadow:0 6px 25px #26334618;backdrop-filter:blur(14px)}.primary-tools{display:flex;gap:5px}.spread-control{display:flex;align-items:center;gap:10px;width:220px;font-size:10px;color:var(--muted)}input[type=range]{accent-color:var(--accent);min-width:0;flex:1;height:24px;cursor:pointer}output{min-width:30px;font:10px "IBM Plex Mono",monospace;color:var(--ink)}.stage-footer{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:24px;right:24px;display:flex;justify-content:space-between;gap:12px;font:8px "IBM Plex Mono",monospace;letter-spacing:.035em;color:var(--muted);pointer-events:none}.panel{position:absolute;z-index:4;right:18px;top:70px;width:290px;max-height:calc(100% - 195px);overflow:auto;overscroll-behavior:contain;background:var(--panel);border:1px solid #ffffffad;padding:18px;border-radius:9px;box-shadow:0 8px 35px #29313f26;backdrop-filter:blur(14px)}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.panel-heading h2{margin:0}.panel-heading button{min-height:32px;min-width:32px;padding:0;font-size:20px;background:transparent}.panel h2{font-size:21px;font-weight:500;line-height:1.2;margin:12px 0}.panel p{font-size:11px;line-height:1.6;color:var(--muted)}.eyebrow,.search-label{font:9px "IBM Plex Mono",monospace;color:var(--muted)}.search-label{display:block;margin:16px 0 8px}input[type=search]{width:100%;min-height:40px;border:1px solid var(--line);border-radius:4px;background:#fff9;color:var(--ink);padding:8px;font-size:12px}#assembly-list{margin-top:12px}#assembly-list button,#detail-list button{display:block;width:100%;text-align:left;white-space:normal;background:transparent;border:0;border-bottom:1px solid var(--line);padding:11px 2px;font-size:11px;border-radius:0}#assembly-list button span,#detail-list button span{display:block;color:var(--muted);font:8px "IBM Plex Mono",monospace;margin-top:5px}#assembly-list button:hover,#detail-list button:hover,#detail-list button[aria-pressed=true]{color:var(--accent);background:#245e550a}.inspector-tools{display:flex;flex-direction:column;gap:5px;margin-top:16px}.inspector-tools button{font-size:11px}#detail-container{margin-top:18px}#detail-container>label{font-size:10px;color:var(--muted)}#detail-spread{display:block;width:100%;margin:8px 0}#detail-list{max-height:230px;overflow:auto}#selection-label{position:absolute;left:24px;bottom:118px;max-width:60%;padding:6px 9px;border-left:2px solid var(--accent);border-radius:3px;background:#ecf0f2d9;color:var(--ink);font-size:10px;pointer-events:none}#load-state,.no-script{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);font:12px "IBM Plex Mono",monospace;color:var(--muted);text-align:center}.ready #load-state{display:none}.loading .tools,.unavailable .tools{visibility:hidden}.loading canvas{opacity:0}.unavailable #load-state{max-width:280px;line-height:1.7}.unavailable canvas,.unavailable .view-controls{display:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:760px){.tools{gap:6px;flex-direction:column;padding:8px;bottom:max(29px,calc(env(safe-area-inset-bottom) + 12px))}.primary-tools{gap:4px}.primary-tools button{padding:8px 10px;font-size:11px}.spread-control{width:100%;padding:0 4px}.viewer-heading{left:15px;top:max(15px,env(safe-area-inset-top))}.brand{font-size:12px}.brand>span{display:block;font-size:8px;margin:5px 0 0}.view-controls{right:12px;top:max(14px,env(safe-area-inset-top));gap:3px}.view-controls button{padding:7px 8px;font-size:9px}.stage-footer{left:15px;right:15px;font-size:7px}.stage-footer span:last-child{display:none}.panel{top:66px;right:12px;width:min(290px,calc(100% - 24px));max-height:calc(100% - 211px)}.has-inspector .inspector{width:calc(100% - 24px);max-height:32vh;top:auto;bottom:max(140px,calc(env(safe-area-inset-bottom) + 123px))}.has-inspector .inspector p{display:none}#selection-label{bottom:147px;left:15px;max-width:70%}}@media(max-width:360px){.primary-tools button{font-size:10px;padding:8px}.tools{max-width:calc(100% - 16px)}.brand{font-size:11px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

@media(max-height:520px) and (min-aspect-ratio:1/1){.has-inspector .inspector{right:12px;width:clamp(180px,33vw,260px);top:65px;bottom:auto;max-height:calc(100% - 195px)}}
