/* Seed43 palette (dark, from the style guide V1.3) */ :root { --bg:#3B4553; --panel:#2B3340; --header:#232933; --card:#2B3340; --ink:#F4FAFF; --dim:#9fb1c4; --line:#404553; --green:#208A3C; --green-h:#2B933F; --green-p:#1A6E2E; --sec-bg:#404553; --sec-h:#4E5566; --sec-p:#333B48; --sec-ink:#F4FAFF; --danger:#C53030; --input-bg:#F4FAFF; --input-ink:#2B3340; --list-bg:#232933; --rowline:#333c49; --hover:#2f4a39; --sel:#208A3C; --overlay:rgba(35,41,51,.92); --scroll:#404553; --scroll-h:#4E5566; --accent:var(--green); --glass-bg:rgba(43,51,64,.55); --glass-bg-strong:rgba(35,41,51,.68); --glass-border:rgba(255,255,255,.10); --glass-shine:rgba(255,255,255,.05); --glass-blur:blur(18px) saturate(160%); } :root[data-theme="light"] { --bg:#e9edf2; --panel:#f6f8fb; --header:#ffffff; --card:#ffffff; --ink:#232933; --dim:#5c6b7a; --line:#d3dbe4; --sec-bg:#e2e8ef; --sec-h:#d6dee7; --sec-p:#c7d1dc; --sec-ink:#232933; --input-bg:#ffffff; --input-ink:#232933; --list-bg:#ffffff; --rowline:#e6ebf1; --hover:#e3f0e7; --sel:#208A3C; --overlay:rgba(233,237,242,.92); --scroll:#c3ccd6; --scroll-h:#aab6c3; --glass-bg:rgba(255,255,255,.55); --glass-bg-strong:rgba(255,255,255,.72); --glass-border:rgba(255,255,255,.65); --glass-shine:rgba(255,255,255,.5); } .glass { background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); box-shadow:0 8px 32px rgba(0,0,0,.18), inset 0 1px 0 var(--glass-shine); } html,body { margin:0; height:100%; overflow:hidden; background:var(--bg); font:13px/1.45 "Segoe UI",system-ui,-apple-system,sans-serif; color:var(--ink); } #view { position:fixed; inset:0; } #side { position:fixed; top:0; left:0; bottom:0; width:54px; display:flex; flex-direction:row; z-index:5; } #rail { width:54px; flex:none; background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); display:flex; flex-direction:column; align-items:center; padding:9px 0; gap:3px; border-right:1px solid var(--glass-border); position:relative; z-index:1; } #rail .railgap { flex:1; } .railbtn { width:40px; height:40px; border-radius:9px; background:var(--glass-shine); border:1px solid var(--glass-border); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:background .12s, border-color .12s; } .railbtn:hover { background:var(--green); border-color:var(--green); color:#F4FAFF; } .railbtn svg { width:22px; height:22px; } .railbtn .mdi { font-size:21px; line-height:1; } .railbtn.arrow svg { transition:transform .15s ease; } .railbtn.arrow.closed svg { transform:scaleX(-1); } .railbtn.danger:hover { background:var(--danger); border-color:var(--danger); color:#F4FAFF; } .railbtn[disabled] { opacity:.32; pointer-events:none; } #viewportLogo { position:fixed; top:14px; left:68px; width:190px; z-index:6; background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:16px; padding:6px; box-shadow:0 8px 24px rgba(0,0,0,.3), inset 0 1px 0 var(--glass-shine); } #viewportLogo svg { width:100%; height:auto; display:block; } #modelbar { display:none; } #body { flex:1; overflow-y:auto; padding:12px 14px 20px; } /* mac-style scrollbars, everywhere: thin, no visible track, translucent rounded thumb that only darkens on hover - applied globally rather than per-container so any current or future scrollable panel (the Member properties card's source-properties list included) gets it automatically instead of needing its own opt-in rule. */ * { scrollbar-width:thin; scrollbar-color:var(--scroll) transparent; } *::-webkit-scrollbar { width:7px; height:7px; } *::-webkit-scrollbar-track { background:transparent; } *::-webkit-scrollbar-thumb { background:var(--scroll); border-radius:99px; border:2px solid transparent; background-clip:padding-box; } *::-webkit-scrollbar-thumb:hover { background:var(--scroll-h); background-clip:padding-box; } *::-webkit-scrollbar-corner { background:transparent; } .sec { margin-bottom:16px; } .sec h2 { font-size:13px; font-weight:600; color:var(--green); margin:0 0 8px; letter-spacing:.2px; } button, select, input[type=text] { font:inherit; border-radius:6px; box-sizing:border-box; } button { background:var(--sec-bg); color:var(--sec-ink); border:none; padding:7px 12px; cursor:pointer; font-size:12px; transition:background .12s; } button:hover { background:var(--sec-h); } button:active { background:var(--sec-p); } button.primary { background:var(--green); color:#F4FAFF; font-weight:600; } button.primary:hover { background:var(--green-h); } button.primary:active { background:var(--green-p); } button.danger { background:var(--danger); color:#F4FAFF; } button.danger:hover { background:#d84444; } button:disabled { opacity:.4; cursor:default; background:var(--sec-bg); } select, input[type=text] { width:100%; background:var(--input-bg); color:var(--input-ink); border:1px solid var(--green); padding:7px 9px; font-size:12px; } select:hover, input[type=text]:hover { border-color:var(--green-h); } select:focus, input[type=text]:focus { outline:none; border-color:var(--green-h); border-width:2px; padding:6px 8px; } select { -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239fb1c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; background-size:14px; padding-right:28px; } html[data-theme="dark"] #search, html[data-theme="dark"] #paramModal input, html[data-theme="dark"] #paramModal select, html[data-theme="dark"] #colormode { background:var(--sec-bg); color:var(--ink); caret-color:var(--ink); } ::placeholder { color:#8a97a5; } .row { display:flex; gap:6px; margin-bottom:6px; } .row > * { flex:1; } label.tog { display:flex; align-items:center; gap:8px; padding:3px 0; cursor:pointer; font-size:12px; } .sw { width:12px; height:12px; border-radius:3px; flex:none; } .cnt { color:var(--dim); font-size:11px; margin-left:auto; } #results { max-height:180px; overflow-y:auto; border:1px solid var(--line); border-radius:6px; background:var(--list-bg); } #facets { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; } .pill { font-size:11px; padding:3px 10px; border-radius:11px; cursor:pointer; background:var(--sec-bg); border:1px solid var(--line); color:var(--ink); white-space:nowrap; } .pill:hover { border-color:var(--green); } .pill.on { background:var(--green); color:#F4FAFF; border-color:var(--green); font-weight:600; } .pill .n { opacity:.7; margin-left:4px; } .pill.on .n { opacity:.9; } #results div { padding:5px 8px; cursor:pointer; border-bottom:1px solid var(--rowline); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #results div:last-child { border-bottom:none; } #results div:hover { background:var(--hover); } .listhint { font-size:10px; color:var(--dim); margin:6px 0 5px; } #catlist { max-height:260px; overflow-y:auto; border:1px solid var(--line); border-radius:6px; background:var(--list-bg); } .catrow { display:flex; align-items:center; gap:7px; padding:5px 8px; border-bottom:1px solid var(--rowline); cursor:pointer; user-select:none; font-size:12px; } .catrow:last-child { border-bottom:none; } .catrow:hover { background:var(--hover); } .catrow.sel { background:var(--sel); color:#F4FAFF; box-shadow:inset 3px 0 0 var(--green-p); } .catrow.sel .cnt { color:#dff0e4; } .catrow.off { opacity:.42; } .catrow input { flex:none; cursor:pointer; margin:0; accent-color:var(--green); } .catrow .sw { width:12px; height:12px; border-radius:3px; flex:none; } .catrow .nm { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .catrow .cnt { color:var(--dim); font-size:11px; flex:none; } .catmore { padding:6px 8px; font-size:11px; color:var(--dim); } label.tog input { accent-color:var(--green); } #statsHud { position:fixed; right:14px; top:14px; width:252px; z-index:6; display:flex; align-items:center; justify-content:space-between; padding:8px 16px; border-radius:8px; font-size:11px; font-variant-numeric:tabular-nums; cursor:default; } #statsHud .stat { display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; } #statsHud .statLbl { font-size:9px; letter-spacing:.5px; color:var(--dim); font-weight:600; } #statsHud #statFps, #statsHud #statMem, #statsHud #statTris { color:var(--ink); font-weight:600; } #statsHud.warn #statFps { color:var(--danger); } #statMemRow.hidden { display:none; } #coffeeBtn { position:fixed; right:14px; top:63px; width:252px; z-index:6; display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 16px; border-radius:8px; font-size:12px; font-weight:600; color:var(--ink); text-decoration:none; transition:border-color .15s, background .15s; } #coffeeBtn:hover { border-color:var(--green); background:rgba(32,138,60,.14); } #coffeeBtn .coffeeIcon { font-size:17px; line-height:1; color:var(--green); text-shadow:0 0 8px rgba(32,138,60,.35); flex:none; } #coffeeBtn img.coffeeIcon { width:18px; height:18px; object-fit:contain; border-radius:4px; text-shadow:none; } #card { position:fixed; right:14px; top:111px; width:340px; max-height:calc(100vh - 140px); overflow-y:auto; background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:8px; padding:14px 16px; z-index:6; display:none; box-shadow:0 8px 28px rgba(0,0,0,.3), inset 0 1px 0 var(--glass-shine); } #card .cardLabel { font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--dim); margin-bottom:2px; } #card h3 { margin:0 0 6px; font-size:15px; font-weight:600; color:var(--green); } #card table { width:100%; font-size:12px; border-collapse:collapse; } #card td { padding:1px 0; vertical-align:top; } #card td:first-child { color:var(--dim); width:72px; } #card .cardSubhead { font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--dim); margin:12px 0 4px; } #cSourcePropsSection.hidden { display:none; } #cSourcePropsWrap { max-height:320px; overflow-y:auto; } #cSourcePropsTable { width:100%; font-size:11.5px; border-collapse:collapse; table-layout:fixed; } #cSourcePropsTable td { padding:2px 0; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #cSourcePropsTable td:first-child { color:var(--dim); width:40%; padding-right:8px; } #card .btns { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; } #card .btns button { font-size:11px; padding:4px 9px; font-weight:600; } #paramModalBackdrop, #exportModalBackdrop { position:fixed; inset:0; background:rgba(10,13,18,.55); z-index:19; } #paramModalBackdrop.hidden, #exportModalBackdrop.hidden { display:none; } #paramModal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:340px; background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:14px; padding:22px 24px; z-index:20; box-shadow:0 16px 44px rgba(0,0,0,.5), inset 0 1px 0 var(--glass-shine); display:flex; flex-direction:column; gap:10px; } #paramModal.hidden { display:none; } #paramModal h3 { margin:0 0 6px; font-size:16px; font-weight:700; color:var(--green); } #paramModal input[type=text], #paramModal input:not([type]) { font-size:13px; padding:9px 13px; border-radius:9px; box-shadow:0 3px 10px rgba(0,0,0,.25); } #paramModal select { font-size:13px; padding:9px 13px; border-radius:9px; } #paramModal .btns { display:flex; gap:8px; margin-top:4px; } #paramModal .btns button { flex:1; padding:9px 0; font-size:12.5px; } #exportModal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:400px; max-height:calc(100vh - 60px); overflow-y:auto; background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:14px; padding:22px 24px; z-index:20; box-shadow:0 16px 44px rgba(0,0,0,.5), inset 0 1px 0 var(--glass-shine); } #exportModal.hidden { display:none; } #exportModal h3 { margin:0 0 14px; font-size:16px; font-weight:700; color:var(--green); } #exportModalClose { position:absolute; top:14px; right:14px; background:none; border:none; color:var(--dim); font-size:15px; cursor:pointer; padding:2px; line-height:1; } #exportModalClose:hover { color:var(--ink); } .exportRow { display:flex; gap:14px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--glass-border); } .exportRow:first-of-type { border-top:none; padding-top:0; } .exportFmtBtn { flex:none; width:74px; padding:9px 0; background:var(--green); color:#F4FAFF; border:none; border-radius:8px; font-weight:700; font-size:12.5px; cursor:pointer; } .exportFmtBtn:hover { background:var(--green-h); } .exportFmtBtn:disabled { background:var(--sec-bg); color:var(--dim); cursor:default; } .exportDesc { font-size:11.5px; line-height:1.5; color:var(--dim); padding-top:2px; } #exportUnavailNote { margin-top:12px; padding-top:12px; border-top:1px solid var(--glass-border); font-size:11px; line-height:1.5; color:var(--dim); font-style:italic; } #exportUnavailNote.hidden { display:none; } #importModalBackdrop { position:fixed; inset:0; background:rgba(10,13,18,.55); z-index:21; } #importModalBackdrop.hidden { display:none; } #importModal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:400px; max-height:calc(100vh - 60px); overflow-y:auto; background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:14px; padding:22px 24px; z-index:22; box-shadow:0 16px 44px rgba(0,0,0,.5), inset 0 1px 0 var(--glass-shine); } #importModal.hidden { display:none; } #importModal h3 { margin:0 0 14px; font-size:16px; font-weight:700; color:var(--green); } #importModalClose { position:absolute; top:14px; right:14px; background:none; border:none; color:var(--dim); font-size:15px; cursor:pointer; padding:2px; line-height:1; } #importModalClose:hover { color:var(--ink); } .importRow { display:block; padding:8px 6px; margin:0 -6px; border-radius:7px; cursor:pointer; font-size:12px; line-height:1.5; } .importRow:hover { background:var(--glass-hover, rgba(255,255,255,.06)); } .importExt { font-weight:700; color:var(--green); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; } .importExt::after { content:" : "; color:var(--dim); font-weight:400; font-family:inherit; } .importDesc { color:var(--dim); } #importModal .importHint, #drop .importHint { margin-top:10px; padding-top:12px; border-top:1px solid var(--glass-border); font-size:11px; color:var(--dim); font-style:italic; text-align:center; } #coordModalBackdrop { position:fixed; inset:0; background:rgba(10,13,18,.55); z-index:19; } #coordModalBackdrop.hidden { display:none; } #coordModal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:340px; max-height:calc(100vh - 60px); overflow-y:auto; background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:14px; padding:22px 24px; z-index:20; box-shadow:0 16px 44px rgba(0,0,0,.5), inset 0 1px 0 var(--glass-shine); } #coordModal.hidden { display:none; } #coordModal h3 { margin:0 0 6px; font-size:16px; font-weight:700; color:var(--green); } #coordModalClose { position:absolute; top:14px; right:14px; background:none; border:none; color:var(--dim); font-size:15px; cursor:pointer; padding:2px; line-height:1; } #coordModalClose:hover { color:var(--ink); } .coordDesc { font-size:11px; line-height:1.5; color:var(--dim); margin-bottom:12px; } .coordMethodRow { display:flex; gap:6px; margin-bottom:12px; } .coordMethodBtn { flex:1; padding:7px 0; font-size:11.5px; font-weight:600; border-radius:7px; border:1px solid var(--line); background:var(--sec-bg); color:var(--dim); cursor:pointer; } .coordMethodBtn.on { background:var(--green); border-color:var(--green); color:#F4FAFF; } .coordPointBlock { padding:10px 0; border-top:1px solid var(--glass-border); } .coordPointBlock:first-of-type { border-top:none; } .coordPointHead { display:flex; justify-content:space-between; align-items:center; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:4px; } .coordPointStatus { font-size:10.5px; font-weight:600; color:var(--dim); } .coordPointStatus.picked { color:var(--green); } .coordRow { display:flex; align-items:center; gap:8px; margin-top:6px; } .coordRow label { flex:none; width:70px; font-size:11px; color:var(--dim); } .coordRow input { font-size:12px; padding:6px 9px; border-radius:7px; } #coordRotationRow.hidden { display:none; } #coordBBlock.hidden { display:none; } #coordCurrentStatus { margin-top:10px; padding:9px 11px; border-radius:8px; background:var(--sec-bg); font-size:11px; line-height:1.5; color:var(--ink); } #coordCurrentStatus.hidden { display:none; } #coordModal .btns { display:flex; gap:8px; margin-top:14px; } #coordModal .btns button { flex:1; padding:9px 0; font-size:12px; } #controlsHelp { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:360px; max-height:calc(100vh - 60px); overflow-y:auto; background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:12px; padding:20px 22px; z-index:20; box-shadow:0 14px 40px rgba(0,0,0,.45), inset 0 1px 0 var(--glass-shine); } #controlsHelp.hidden { display:none; } #controlsHelp h3 { margin:0 0 8px; font-size:16px; font-weight:700; color:var(--green); } #controlsHelp .ctrlSection { margin-top:14px; padding-top:12px; border-top:1px solid var(--glass-border); } #controlsHelp .ctrlSection:first-of-type { margin-top:2px; padding-top:0; border-top:none; } #controlsHelp h4 { margin:0 0 6px; font-size:12px; font-weight:700; color:var(--dim); text-transform:uppercase; letter-spacing:.5px; } #controlsHelpClose { position:absolute; top:14px; right:14px; background:none; border:none; color:var(--dim); font-size:15px; cursor:pointer; padding:2px; line-height:1; } #controlsHelpClose:hover { color:var(--ink); } .flyRow { display:flex; align-items:center; gap:12px; padding:5px 0; font-size:12.5px; color:var(--ink); } .flyKeys { display:flex; gap:5px; flex:none; width:100px; } .flyKeys b { display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:22px; padding:0 6px; border-radius:5px; background:var(--sec-bg); border:1px solid var(--line); font-size:11px; font-weight:700; color:var(--ink); } .mouseRow { display:flex; align-items:center; gap:11px; padding:5px 0; font-size:12.5px; color:var(--ink); } .mouseIcon { flex:none; width:22px; text-align:center; font-size:17px; color:var(--dim); } .keyDiamond { display:grid; grid-template-columns:repeat(3, 34px); grid-auto-rows:34px; gap:4px; justify-content:center; margin:8px auto 6px; } .keyCell { display:flex; align-items:center; justify-content:center; background:var(--sec-bg); border:1px solid var(--line); border-radius:6px; font-weight:700; font-size:13px; color:var(--ink); box-shadow:0 2px 0 rgba(0,0,0,.3); } .k-q, .k-e { color:var(--dim); font-size:11px; } .keyDiamondLegend { text-align:center; font-size:10.5px; color:var(--dim); margin-bottom:8px; } .axisRow { display:flex; flex-direction:column; gap:3px; margin:10px 0 4px; font-size:12px; } .axisTextRow { display:flex; align-items:center; gap:4px; color:var(--ink); } .axisToggle { font-weight:700; font-family:inherit; cursor:pointer; color:var(--dim); border-radius:4px; padding:1px 3px; } .axisToggle:hover { background:var(--sec-bg); } .axisToggle.on { color:var(--green); } .railbtn.active { background:var(--green); border-color:var(--green); color:#F4FAFF; } #measureTip { position:fixed; z-index:15; background:#fff; color:#232933; border-radius:6px; padding:7px 11px; font-size:12px; line-height:1.5; box-shadow:0 4px 14px rgba(0,0,0,.3); pointer-events:none; display:none; white-space:nowrap; } #measureTip b { color:#1a4d80; font-weight:700; } #measureTip .tipCoord { color:#208A3C; font-weight:600; font-size:11px; } #tabCycleIndicator { position:fixed; z-index:15; right:16px; bottom:38px; background:rgba(35,41,51,.92); color:#F4FAFF; border-radius:8px; padding:8px 14px; font-size:12px; font-weight:600; letter-spacing:.2px; box-shadow:0 4px 14px rgba(0,0,0,.3); pointer-events:none; display:none; white-space:nowrap; gap:8px; align-items:center; } #tabCycleIndicator .tcLabel { color:#9db3c9; font-weight:500; } #tabCycleIndicator .tcOpt { padding:2px 8px; border-radius:5px; color:#9db3c9; } #tabCycleIndicator .tcOpt.on { background:var(--green); color:#0b1116; } #cParamsTable { width:100%; font-size:12px; border-collapse:collapse; margin-top:2px; } #cParamsTable td { padding:1px 0; vertical-align:top; } #cParamsTable td:first-child { color:var(--dim); width:72px; } #cParamsTable td.paramNoVal { color:var(--dim); font-style:italic; } #cParamsTable .paramDelBtn { background:none; border:none; color:var(--dim); cursor:pointer; font-size:13px; padding:0 0 0 6px; line-height:1; } #cParamsTable .paramDelBtn:hover { color:var(--danger); } .linklike { background:none; border:none; color:var(--green); font-size:11.5px; font-weight:600; padding:6px 0 2px; cursor:pointer; text-align:left; } .linklike:hover { text-decoration:underline; } /* theme toggle pill */ .theme-toggle { display:inline-flex; align-items:center; gap:7px; cursor:pointer; background:var(--sec-bg); border:1px solid var(--line); border-radius:14px; padding:4px 11px 4px 5px; font-size:11px; color:var(--ink); } .theme-toggle:hover { border-color:var(--green); background:var(--sec-bg); } .theme-toggle .knob { width:15px; height:15px; border-radius:50%; flex:none; background:radial-gradient(circle at 35% 30%, #ffe08a, #f2b705); } :root[data-theme="light"] .theme-toggle .knob { background:radial-gradient(circle at 35% 30%, #fff2c4, #f2a007); } /* view cube overlay */ #colourVisPopout, #modelMgmtPopout, #dimsPopout, #gridUcsPopout { position:fixed; left:68px; top:128px; width:230px; max-height:calc(100vh - 148px); overflow-y:auto; z-index:6; background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:8px; padding:16px 18px; box-shadow:0 8px 28px rgba(0,0,0,.3), inset 0 1px 0 var(--glass-shine); } #colourVisPopout.hidden, #modelMgmtPopout.hidden, #dimsPopout.hidden, #gridUcsPopout.hidden { display:none; } #colourVisPopout h2, #modelMgmtPopout h2, #dimsPopout h2, #gridUcsPopout h2 { margin:0 0 6px; font-size:15px; font-weight:600; color:var(--green); } #dimsList { display:flex; flex-direction:column; gap:4px; margin-top:4px; max-height:260px; overflow-y:auto; } #dimsList .dimRow { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; cursor:pointer; font-size:12px; background:var(--glass-bg); border:1px solid transparent; } #dimsList .dimRow:hover { border-color:var(--glass-border); } #dimsList .dimRow.sel { border-color:var(--green); background:rgba(46,204,113,.12); } #dimsList .dimSwatch { width:11px; height:11px; border-radius:50%; flex:none; } #dimsList .dimVal { color:var(--ink); font-variant-numeric:tabular-nums; } #dimsList .dimEmpty { color:var(--dim); font-size:12px; } .dimsGlobalRow { display:flex; align-items:center; justify-content:space-between; margin-top:8px; font-size:12px; } .dimsGlobalRow input[type=color] { width:40px; height:22px; padding:0; border:1px solid var(--line); border-radius:5px; } #dimOverride { margin-top:12px; padding-top:10px; border-top:1px solid var(--glass-border); } #dimOverride.hidden { display:none; } #dimOverride h3 { margin:0 0 6px; font-size:13px; font-weight:600; color:var(--green); } #dimOverride table { width:100%; font-size:12px; border-collapse:collapse; } #dimOverride td { padding:3px 0; vertical-align:middle; } #dimOverride td:first-child { color:var(--dim); width:72px; } #dimOverride #dimCardColour { width:44px; height:24px; padding:0; border:1px solid var(--line); border-radius:5px; } #dimOverride .btns { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; } #dimOverride .btns button { font-size:11px; padding:4px 9px; font-weight:600; } #topNotice { position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:14; background:rgba(35,41,51,.92); color:#F4FAFF; border-radius:20px; padding:9px 20px; font-size:13px; font-weight:600; letter-spacing:.2px; white-space:nowrap; box-shadow:0 6px 20px rgba(0,0,0,.35); pointer-events:none; } #topNotice.hidden { display:none; } #topNotice .tnOn { color:var(--green); } #searchOverlay { position:fixed; top:16px; left:50%; transform:translateX(-50%); width:560px; max-width:min(560px, calc(100vw - 340px)); z-index:15; display:none; flex-direction:column; gap:9px; } #searchOverlay.open { display:flex; } #searchOverlay input[type=text] { font-size:14px; padding:11px 16px; border-radius:10px; box-shadow:0 4px 16px rgba(0,0,0,.35); } #searchOverlay #facets { justify-content:center; margin-top:0; } #searchOverlay #results:empty { display:none; } #searchOverlay #results { background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:8px; max-height:280px; box-shadow:0 8px 24px rgba(0,0,0,.28), inset 0 1px 0 var(--glass-shine); } #searchOverlay #searchActions.hidden { display:none; } #cube { position:fixed; top:14px; left:310px; width:104px; height:104px; z-index:6; cursor:pointer; } #cubeHome { position:fixed; top:120px; left:346px; z-index:6; width:32px; height:26px; padding:0; font-size:12px; border:1px solid var(--glass-border); border-radius:6px; background:var(--glass-bg-strong); color:var(--ink); display:flex; align-items:center; justify-content:center; } #cubeHome:hover { border-color:var(--green); } #flySpeedHud { position:fixed; right:14px; bottom:34px; z-index:9; display:flex; align-items:center; gap:9px; padding:6px 10px; border-radius:8px; background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); box-shadow:0 6px 18px rgba(0,0,0,.35); font-size:12px; font-weight:600; color:var(--ink); } #flySpeedHud.hidden { display:none; } #flySpeedHud button { width:22px; height:22px; padding:0; border-radius:5px; font-size:14px; font-weight:700; line-height:1; } #flySpeedVal { min-width:56px; text-align:center; font-variant-numeric:tabular-nums; } #statusbar { position:fixed; left:54px; bottom:0; right:0; height:26px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 14px; font-size:11px; color:#F4FAFF; background:rgba(35,41,51,.72); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); border-top:1px solid rgba(255,255,255,.08); z-index:4; } #statusbar .st { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #statusbar .hint { color:#F4FAFF; opacity:.82; white-space:nowrap; } #statusbar .stleft { display:flex; align-items:center; gap:12px; overflow:hidden; min-width:0; } #sectionBadge { position:fixed; left:calc(54px + (100% - 54px)/2); transform:translateX(-50%); z-index:9; display:inline-flex; align-items:center; gap:7px; background:var(--green); color:#F4FAFF; padding:5px 8px 5px 13px; border-radius:13px; white-space:nowrap; font-weight:600; font-size:12px; box-shadow:0 6px 18px rgba(0,0,0,.35); } #sectionBadge.hidden { display:none; } #sectionBadge button { background:rgba(0,0,0,.18); color:#F4FAFF; border:none; border-radius:8px; padding:2px 8px; font-size:10px; font-weight:600; cursor:pointer; } #sectionBadge button:hover { background:rgba(0,0,0,.32); } #sectionSliderBar { position:fixed; left:54px; right:0; bottom:26px; z-index:8; background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border-top:1px solid var(--glass-border); padding:9px 24px 7px; display:flex; flex-direction:column; gap:3px; } #sectionSliderBar.hidden { display:none; } .ssb-row { display:flex; align-items:center; gap:12px; } .ssb-row input[type=range] { flex:1; accent-color:var(--green); height:4px; margin:0; } #ssbBack { direction:rtl; } /* left half: value grows away from centre */ .ssb-val { width:48px; text-align:center; font-size:11px; font-weight:600; color:var(--ink); background:var(--sec-bg); border-radius:6px; padding:3px 0; flex:none; } .ssb-center { color:var(--green); font-weight:700; flex:none; font-size:14px; } .ssb-labels { display:flex; justify-content:space-between; font-size:10px; color:var(--dim); padding:0 2px; } /* Open-a-model screen, in the seed43.org site style (4 October 2026). */ #drop { position:fixed; inset:0; z-index:20; display:flex; overflow-y:auto; background:var(--header); color:var(--ink); } #drop.hide { display:none; } #dropGrid { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; } #drop .dropGlow { position:fixed; width:720px; height:720px; right:-240px; top:-320px; pointer-events:none; background:radial-gradient(circle, rgba(32,138,60,.32), transparent 62%); animation:dropBreathe 9s ease-in-out infinite; } @keyframes dropBreathe { 50% { transform:scale(1.12); opacity:.75; } } #drop .dropInner { position:relative; width:min(980px, 100% - 32px); margin:auto; padding:48px 0 40px; } #drop .dropBack { position:absolute; top:18px; left:0; color:var(--dim); font-size:13px; text-decoration:none; } #drop .dropBack:hover { color:var(--green-h); } #drop .dropCode { font:500 13px ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--dim); margin:18px 0 14px; } #drop .dropCode .k { color:var(--ink); opacity:.75; } #drop .dropCode .y { color:#7fd197; } #drop .dropCode .n { color:#f08a8d; } #drop h1 { font-size:clamp(30px, 5vw, 46px); line-height:1.1; letter-spacing:-.02em; margin:0 0 10px; font-weight:800; } #drop h1 em { font-style:normal; color:var(--green-h); } #drop .dropLead { color:var(--dim); font-size:16px; max-width:560px; margin:0 0 28px; } #drop .zone { position:relative; display:flex; align-items:center; gap:22px; flex-wrap:wrap; border:1.5px dashed var(--line); border-radius:18px; padding:26px 28px; margin-bottom:28px; background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); transition:border-color .2s, box-shadow .2s, transform .2s; } #drop.dragover .zone { border-color:var(--green-h); border-style:solid; transform:scale(1.01); box-shadow:0 0 0 6px rgba(32,138,60,.15), 0 24px 60px -24px rgba(50,147,76,.6); } #drop .zoneLeaf { position:relative; width:58px; height:58px; flex-shrink:0; } #drop .zoneLeaf::before { content:""; position:absolute; inset:-16px; border-radius:50%; background:radial-gradient(circle, rgba(70,224,112,.5), transparent 65%); animation:ldGlow 2.4s ease-in-out infinite; } #drop .zoneLeaf svg { position:relative; width:58px; height:58px; } #drop .zoneText { flex:1; min-width:200px; } #drop .zoneText strong { display:block; font-size:18px; margin-bottom:2px; } #drop .zoneText span { color:var(--dim); font-size:13px; } #drop .zone button#btnOpen2 { padding:12px 26px; font-weight:700; font-size:14px; border-radius:10px; box-shadow:0 8px 24px -10px rgba(50,147,76,.8); } #drop .dropLabel { font:600 11px ui-monospace,SFMono-Regular,Consolas,monospace; text-transform:uppercase; letter-spacing:.12em; color:var(--green-h); margin:0 0 12px; } #drop .dropLabel span { color:var(--dim); margin-right:6px; } #drop .dropFormatList { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px; } #drop .importRow { margin:0; padding:14px 16px; border-radius:12px; border:1px solid var(--line); background:var(--panel); transition:border-color .15s, transform .15s; } #drop .importRow:hover { border-color:var(--green-h); transform:translateY(-2px); background:var(--panel); } #drop .importExt { display:block; font-size:14px; margin-bottom:4px; } #drop .importExt::after { content:none; } #drop .importDesc { font-size:12.5px; line-height:1.5; } #drop .dropFoot { margin-top:22px; color:var(--dim); font-size:12px; } @media (prefers-reduced-motion: reduce) { #drop .dropGlow, #drop .zoneLeaf::before { animation:none; } } #spin { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:var(--overlay); z-index:30; color:var(--ink); font-size:15px; } #spinBox { display:flex; flex-direction:column; align-items:center; gap:14px; } /* crane loader - purely decorative, not tied to real load progress in any way (a large file's long main-thread block was previously visible as trolley stutter, because `left` requires layout on every frame; trolley now animates via `transform: translateX()` instead, which is compositor-only and keeps running smoothly regardless of what the main thread is doing). One delivery cycle is 6s: cable starts up at the pile, lowers, picks a block, lifts it, travels right, lowers it onto the building, releases, lifts empty, travels back left, repeats. Building is 6 levels x 3 sections (18 blocks, 18 deliveries). After the 18th delivery it holds for one more 6s beat, then all blocks fade out together (disassemble) over the following 3s, pauses briefly empty, then the whole 114s cycle loops. */ #craneLoader { position:relative; width:220px; height:160px; } #craneLoader .crane-ground { position:absolute; left:0; right:0; bottom:20px; height:2px; background:var(--glass-border); } #craneLoader .crane-mast { position:absolute; left:40px; bottom:20px; width:5px; height:110px; background:var(--dim); } #craneLoader .crane-cab { position:absolute; left:33px; bottom:126px; width:19px; height:13px; background:var(--dim); border-radius:2px; } #craneLoader .crane-jib { position:absolute; left:20px; bottom:132px; width:170px; height:4px; background:var(--dim); } #craneLoader .crane-counterweight { position:absolute; left:0; top:-6px; width:14px; height:10px; background:var(--dim); border-radius:1px; } #craneLoader .crane-trolley { position:absolute; top:-3px; left:40px; width:10px; height:7px; background:var(--green); border-radius:1px; animation:craneTrolleyBig 114s linear infinite; } /* cable-line is purely the thin visual line - safe to scale (a plain rectangle just gets shorter, no distortion). hook-rig is a SIBLING, not a child, of the cable line, so it never inherits that scale - this is what fixes the squashed-block bug: previously the hook and block were nested inside the scaled cable, so scaleY() compressed them too. hook-rig instead moves via its own translateY, sharing the same per-delivery timing/depth as the cable line so they still look visually connected. */ #craneLoader .crane-cable-line { position:absolute; top:7px; left:4px; width:2px; height:100px; background:var(--dim); transform:scaleY(.24); transform-origin:top center; animation:craneCableLineBig 114s linear infinite; } #craneLoader .crane-hook-rig { position:absolute; top:7px; left:0; width:10px; height:6px; transform:translateY(24px); animation:craneHookBig 114s linear infinite; } #craneLoader .crane-hook { position:absolute; left:-4px; top:0; width:10px; height:6px; } #craneLoader .crane-block { position:absolute; inset:0; margin:auto; width:11px; height:11px; background:var(--green); border-radius:2px; opacity:0; animation:craneBlockCarry 6s linear infinite; } #craneLoader .material-pile { position:absolute; left:26px; bottom:20px; width:46px; height:16px; } #craneLoader .material-pile span { position:absolute; bottom:0; width:14px; height:14px; background:var(--dim); opacity:.5; border-radius:2px; } #craneLoader .material-pile span:nth-child(1) { left:0; } #craneLoader .material-pile span:nth-child(2) { left:16px; } #craneLoader .material-pile span:nth-child(3) { left:8px; bottom:12px; } #craneLoader .building { position:absolute; left:145px; bottom:20px; width:42px; height:72px; } #craneLoader .b-slot { position:absolute; width:13px; height:12px; background:var(--green); opacity:0; border-radius:1px; } #craneLoader .bs1 { left:0; bottom:0; animation:craneSlot1 114s linear infinite; } #craneLoader .bs2 { left:14px; bottom:0; animation:craneSlot2 114s linear infinite; } #craneLoader .bs3 { left:28px; bottom:0; animation:craneSlot3 114s linear infinite; } #craneLoader .bs4 { left:0; bottom:12px; animation:craneSlot4 114s linear infinite; } #craneLoader .bs5 { left:14px; bottom:12px; animation:craneSlot5 114s linear infinite; } #craneLoader .bs6 { left:28px; bottom:12px; animation:craneSlot6 114s linear infinite; } #craneLoader .bs7 { left:0; bottom:24px; animation:craneSlot7 114s linear infinite; } #craneLoader .bs8 { left:14px; bottom:24px; animation:craneSlot8 114s linear infinite; } #craneLoader .bs9 { left:28px; bottom:24px; animation:craneSlot9 114s linear infinite; } #craneLoader .bs10 { left:0; bottom:36px; animation:craneSlot10 114s linear infinite; } #craneLoader .bs11 { left:14px; bottom:36px; animation:craneSlot11 114s linear infinite; } #craneLoader .bs12 { left:28px; bottom:36px; animation:craneSlot12 114s linear infinite; } #craneLoader .bs13 { left:0; bottom:48px; animation:craneSlot13 114s linear infinite; } #craneLoader .bs14 { left:14px; bottom:48px; animation:craneSlot14 114s linear infinite; } #craneLoader .bs15 { left:28px; bottom:48px; animation:craneSlot15 114s linear infinite; } #craneLoader .bs16 { left:0; bottom:60px; animation:craneSlot16 114s linear infinite; } #craneLoader .bs17 { left:14px; bottom:60px; animation:craneSlot17 114s linear infinite; } #craneLoader .bs18 { left:28px; bottom:60px; animation:craneSlot18 114s linear infinite; } /* trolley/hook/cable-line now each move on ONE big 114s timeline covering all 18 deliveries, instead of a short generic 6s loop repeated identically - this is what makes each block land at its own real target (column X + the height/Z of whatever level is currently being built) instead of always dropping at one fixed spot. Same phase choreography as before (lower, pick, lift, pause, travel, lower, release, lift, travel back) just baked per-delivery. Horizontal motion uses transform (translateX), never `left` - see note further up on why. Generated programmatically, not hand-typed, to avoid transcription errors across 18 deliveries x ~10 steps. */ @keyframes craneTrolleyBig { 0.0% { transform:translateX(0px); } 2.542% { transform:translateX(0px); } 3.595% { transform:translateX(90px); } 4.737% { transform:translateX(90px); } 5.263% { transform:translateX(0px); } 7.805% { transform:translateX(0px); } 8.858% { transform:translateX(104px); } 10.0% { transform:translateX(104px); } 10.526% { transform:translateX(0px); } 13.068% { transform:translateX(0px); } 14.121% { transform:translateX(118px); } 15.263% { transform:translateX(118px); } 15.789% { transform:translateX(0px); } 18.332% { transform:translateX(0px); } 19.384% { transform:translateX(90px); } 20.526% { transform:translateX(90px); } 21.053% { transform:translateX(0px); } 23.595% { transform:translateX(0px); } 24.647% { transform:translateX(104px); } 25.789% { transform:translateX(104px); } 26.316% { transform:translateX(0px); } 28.858% { transform:translateX(0px); } 29.911% { transform:translateX(118px); } 31.053% { transform:translateX(118px); } 31.579% { transform:translateX(0px); } 34.121% { transform:translateX(0px); } 35.174% { transform:translateX(90px); } 36.316% { transform:translateX(90px); } 36.842% { transform:translateX(0px); } 39.384% { transform:translateX(0px); } 40.437% { transform:translateX(104px); } 41.579% { transform:translateX(104px); } 42.105% { transform:translateX(0px); } 44.647% { transform:translateX(0px); } 45.7% { transform:translateX(118px); } 46.842% { transform:translateX(118px); } 47.368% { transform:translateX(0px); } 49.911% { transform:translateX(0px); } 50.963% { transform:translateX(90px); } 52.105% { transform:translateX(90px); } 52.632% { transform:translateX(0px); } 55.174% { transform:translateX(0px); } 56.226% { transform:translateX(104px); } 57.368% { transform:translateX(104px); } 57.895% { transform:translateX(0px); } 60.437% { transform:translateX(0px); } 61.489% { transform:translateX(118px); } 62.632% { transform:translateX(118px); } 63.158% { transform:translateX(0px); } 65.7% { transform:translateX(0px); } 66.753% { transform:translateX(90px); } 67.895% { transform:translateX(90px); } 68.421% { transform:translateX(0px); } 70.963% { transform:translateX(0px); } 72.016% { transform:translateX(104px); } 73.158% { transform:translateX(104px); } 73.684% { transform:translateX(0px); } 76.226% { transform:translateX(0px); } 77.279% { transform:translateX(118px); } 78.421% { transform:translateX(118px); } 78.947% { transform:translateX(0px); } 81.489% { transform:translateX(0px); } 82.542% { transform:translateX(90px); } 83.684% { transform:translateX(90px); } 84.211% { transform:translateX(0px); } 86.753% { transform:translateX(0px); } 87.805% { transform:translateX(104px); } 88.947% { transform:translateX(104px); } 89.474% { transform:translateX(0px); } 92.016% { transform:translateX(0px); } 93.068% { transform:translateX(118px); } 94.211% { transform:translateX(118px); } 94.737% { transform:translateX(0px); } } @keyframes craneHookBig { 0.0% { transform:translateY(24px); } 0.7% { transform:translateY(96px); } 1.142% { transform:translateY(96px); } 1.842% { transform:translateY(24px); } 2.542% { transform:translateY(24px); } 3.595% { transform:translateY(24px); } 4.3% { transform:translateY(96px); } 4.384% { transform:translateY(96px); } 4.737% { transform:translateY(24px); } 5.263% { transform:translateY(24px); } 5.963% { transform:translateY(96px); } 6.405% { transform:translateY(96px); } 7.105% { transform:translateY(24px); } 7.805% { transform:translateY(24px); } 8.858% { transform:translateY(24px); } 9.563% { transform:translateY(96px); } 9.647% { transform:translateY(96px); } 10.0% { transform:translateY(24px); } 10.526% { transform:translateY(24px); } 11.226% { transform:translateY(96px); } 11.668% { transform:translateY(96px); } 12.368% { transform:translateY(24px); } 13.068% { transform:translateY(24px); } 14.121% { transform:translateY(24px); } 14.826% { transform:translateY(96px); } 14.911% { transform:translateY(96px); } 15.263% { transform:translateY(24px); } 15.789% { transform:translateY(24px); } 16.489% { transform:translateY(96px); } 16.932% { transform:translateY(96px); } 17.632% { transform:translateY(24px); } 18.332% { transform:translateY(24px); } 19.384% { transform:translateY(24px); } 20.089% { transform:translateY(84px); } 20.174% { transform:translateY(84px); } 20.526% { transform:translateY(24px); } 21.053% { transform:translateY(24px); } 21.753% { transform:translateY(96px); } 22.195% { transform:translateY(96px); } 22.895% { transform:translateY(24px); } 23.595% { transform:translateY(24px); } 24.647% { transform:translateY(24px); } 25.353% { transform:translateY(84px); } 25.437% { transform:translateY(84px); } 25.789% { transform:translateY(24px); } 26.316% { transform:translateY(24px); } 27.016% { transform:translateY(96px); } 27.458% { transform:translateY(96px); } 28.158% { transform:translateY(24px); } 28.858% { transform:translateY(24px); } 29.911% { transform:translateY(24px); } 30.616% { transform:translateY(84px); } 30.7% { transform:translateY(84px); } 31.053% { transform:translateY(24px); } 31.579% { transform:translateY(24px); } 32.279% { transform:translateY(96px); } 32.721% { transform:translateY(96px); } 33.421% { transform:translateY(24px); } 34.121% { transform:translateY(24px); } 35.174% { transform:translateY(24px); } 35.879% { transform:translateY(72px); } 35.963% { transform:translateY(72px); } 36.316% { transform:translateY(24px); } 36.842% { transform:translateY(24px); } 37.542% { transform:translateY(96px); } 37.984% { transform:translateY(96px); } 38.684% { transform:translateY(24px); } 39.384% { transform:translateY(24px); } 40.437% { transform:translateY(24px); } 41.142% { transform:translateY(72px); } 41.226% { transform:translateY(72px); } 41.579% { transform:translateY(24px); } 42.105% { transform:translateY(24px); } 42.805% { transform:translateY(96px); } 43.247% { transform:translateY(96px); } 43.947% { transform:translateY(24px); } 44.647% { transform:translateY(24px); } 45.7% { transform:translateY(24px); } 46.405% { transform:translateY(72px); } 46.489% { transform:translateY(72px); } 46.842% { transform:translateY(24px); } 47.368% { transform:translateY(24px); } 48.068% { transform:translateY(96px); } 48.511% { transform:translateY(96px); } 49.211% { transform:translateY(24px); } 49.911% { transform:translateY(24px); } 50.963% { transform:translateY(24px); } 51.668% { transform:translateY(60px); } 51.753% { transform:translateY(60px); } 52.105% { transform:translateY(24px); } 52.632% { transform:translateY(24px); } 53.332% { transform:translateY(96px); } 53.774% { transform:translateY(96px); } 54.474% { transform:translateY(24px); } 55.174% { transform:translateY(24px); } 56.226% { transform:translateY(24px); } 56.932% { transform:translateY(60px); } 57.016% { transform:translateY(60px); } 57.368% { transform:translateY(24px); } 57.895% { transform:translateY(24px); } 58.595% { transform:translateY(96px); } 59.037% { transform:translateY(96px); } 59.737% { transform:translateY(24px); } 60.437% { transform:translateY(24px); } 61.489% { transform:translateY(24px); } 62.195% { transform:translateY(60px); } 62.279% { transform:translateY(60px); } 62.632% { transform:translateY(24px); } 63.158% { transform:translateY(24px); } 63.858% { transform:translateY(96px); } 64.3% { transform:translateY(96px); } 65.0% { transform:translateY(24px); } 65.7% { transform:translateY(24px); } 66.753% { transform:translateY(24px); } 67.458% { transform:translateY(48px); } 67.542% { transform:translateY(48px); } 67.895% { transform:translateY(24px); } 68.421% { transform:translateY(24px); } 69.121% { transform:translateY(96px); } 69.563% { transform:translateY(96px); } 70.263% { transform:translateY(24px); } 70.963% { transform:translateY(24px); } 72.016% { transform:translateY(24px); } 72.721% { transform:translateY(48px); } 72.805% { transform:translateY(48px); } 73.158% { transform:translateY(24px); } 73.684% { transform:translateY(24px); } 74.384% { transform:translateY(96px); } 74.826% { transform:translateY(96px); } 75.526% { transform:translateY(24px); } 76.226% { transform:translateY(24px); } 77.279% { transform:translateY(24px); } 77.984% { transform:translateY(48px); } 78.068% { transform:translateY(48px); } 78.421% { transform:translateY(24px); } 78.947% { transform:translateY(24px); } 79.647% { transform:translateY(96px); } 80.089% { transform:translateY(96px); } 80.789% { transform:translateY(24px); } 81.489% { transform:translateY(24px); } 82.542% { transform:translateY(24px); } 83.247% { transform:translateY(36px); } 83.332% { transform:translateY(36px); } 83.684% { transform:translateY(24px); } 84.211% { transform:translateY(24px); } 84.911% { transform:translateY(96px); } 85.353% { transform:translateY(96px); } 86.053% { transform:translateY(24px); } 86.753% { transform:translateY(24px); } 87.805% { transform:translateY(24px); } 88.511% { transform:translateY(36px); } 88.595% { transform:translateY(36px); } 88.947% { transform:translateY(24px); } 89.474% { transform:translateY(24px); } 90.174% { transform:translateY(96px); } 90.616% { transform:translateY(96px); } 91.316% { transform:translateY(24px); } 92.016% { transform:translateY(24px); } 93.068% { transform:translateY(24px); } 93.774% { transform:translateY(36px); } 93.858% { transform:translateY(36px); } 94.211% { transform:translateY(24px); } 94.737% { transform:translateY(24px); } } @keyframes craneCableLineBig { 0.0% { transform:scaleY(0.24); } 0.7% { transform:scaleY(0.96); } 1.142% { transform:scaleY(0.96); } 1.842% { transform:scaleY(0.24); } 2.542% { transform:scaleY(0.24); } 3.595% { transform:scaleY(0.24); } 4.3% { transform:scaleY(0.96); } 4.384% { transform:scaleY(0.96); } 4.737% { transform:scaleY(0.24); } 5.263% { transform:scaleY(0.24); } 5.963% { transform:scaleY(0.96); } 6.405% { transform:scaleY(0.96); } 7.105% { transform:scaleY(0.24); } 7.805% { transform:scaleY(0.24); } 8.858% { transform:scaleY(0.24); } 9.563% { transform:scaleY(0.96); } 9.647% { transform:scaleY(0.96); } 10.0% { transform:scaleY(0.24); } 10.526% { transform:scaleY(0.24); } 11.226% { transform:scaleY(0.96); } 11.668% { transform:scaleY(0.96); } 12.368% { transform:scaleY(0.24); } 13.068% { transform:scaleY(0.24); } 14.121% { transform:scaleY(0.24); } 14.826% { transform:scaleY(0.96); } 14.911% { transform:scaleY(0.96); } 15.263% { transform:scaleY(0.24); } 15.789% { transform:scaleY(0.24); } 16.489% { transform:scaleY(0.96); } 16.932% { transform:scaleY(0.96); } 17.632% { transform:scaleY(0.24); } 18.332% { transform:scaleY(0.24); } 19.384% { transform:scaleY(0.24); } 20.089% { transform:scaleY(0.84); } 20.174% { transform:scaleY(0.84); } 20.526% { transform:scaleY(0.24); } 21.053% { transform:scaleY(0.24); } 21.753% { transform:scaleY(0.96); } 22.195% { transform:scaleY(0.96); } 22.895% { transform:scaleY(0.24); } 23.595% { transform:scaleY(0.24); } 24.647% { transform:scaleY(0.24); } 25.353% { transform:scaleY(0.84); } 25.437% { transform:scaleY(0.84); } 25.789% { transform:scaleY(0.24); } 26.316% { transform:scaleY(0.24); } 27.016% { transform:scaleY(0.96); } 27.458% { transform:scaleY(0.96); } 28.158% { transform:scaleY(0.24); } 28.858% { transform:scaleY(0.24); } 29.911% { transform:scaleY(0.24); } 30.616% { transform:scaleY(0.84); } 30.7% { transform:scaleY(0.84); } 31.053% { transform:scaleY(0.24); } 31.579% { transform:scaleY(0.24); } 32.279% { transform:scaleY(0.96); } 32.721% { transform:scaleY(0.96); } 33.421% { transform:scaleY(0.24); } 34.121% { transform:scaleY(0.24); } 35.174% { transform:scaleY(0.24); } 35.879% { transform:scaleY(0.72); } 35.963% { transform:scaleY(0.72); } 36.316% { transform:scaleY(0.24); } 36.842% { transform:scaleY(0.24); } 37.542% { transform:scaleY(0.96); } 37.984% { transform:scaleY(0.96); } 38.684% { transform:scaleY(0.24); } 39.384% { transform:scaleY(0.24); } 40.437% { transform:scaleY(0.24); } 41.142% { transform:scaleY(0.72); } 41.226% { transform:scaleY(0.72); } 41.579% { transform:scaleY(0.24); } 42.105% { transform:scaleY(0.24); } 42.805% { transform:scaleY(0.96); } 43.247% { transform:scaleY(0.96); } 43.947% { transform:scaleY(0.24); } 44.647% { transform:scaleY(0.24); } 45.7% { transform:scaleY(0.24); } 46.405% { transform:scaleY(0.72); } 46.489% { transform:scaleY(0.72); } 46.842% { transform:scaleY(0.24); } 47.368% { transform:scaleY(0.24); } 48.068% { transform:scaleY(0.96); } 48.511% { transform:scaleY(0.96); } 49.211% { transform:scaleY(0.24); } 49.911% { transform:scaleY(0.24); } 50.963% { transform:scaleY(0.24); } 51.668% { transform:scaleY(0.6); } 51.753% { transform:scaleY(0.6); } 52.105% { transform:scaleY(0.24); } 52.632% { transform:scaleY(0.24); } 53.332% { transform:scaleY(0.96); } 53.774% { transform:scaleY(0.96); } 54.474% { transform:scaleY(0.24); } 55.174% { transform:scaleY(0.24); } 56.226% { transform:scaleY(0.24); } 56.932% { transform:scaleY(0.6); } 57.016% { transform:scaleY(0.6); } 57.368% { transform:scaleY(0.24); } 57.895% { transform:scaleY(0.24); } 58.595% { transform:scaleY(0.96); } 59.037% { transform:scaleY(0.96); } 59.737% { transform:scaleY(0.24); } 60.437% { transform:scaleY(0.24); } 61.489% { transform:scaleY(0.24); } 62.195% { transform:scaleY(0.6); } 62.279% { transform:scaleY(0.6); } 62.632% { transform:scaleY(0.24); } 63.158% { transform:scaleY(0.24); } 63.858% { transform:scaleY(0.96); } 64.3% { transform:scaleY(0.96); } 65.0% { transform:scaleY(0.24); } 65.7% { transform:scaleY(0.24); } 66.753% { transform:scaleY(0.24); } 67.458% { transform:scaleY(0.48); } 67.542% { transform:scaleY(0.48); } 67.895% { transform:scaleY(0.24); } 68.421% { transform:scaleY(0.24); } 69.121% { transform:scaleY(0.96); } 69.563% { transform:scaleY(0.96); } 70.263% { transform:scaleY(0.24); } 70.963% { transform:scaleY(0.24); } 72.016% { transform:scaleY(0.24); } 72.721% { transform:scaleY(0.48); } 72.805% { transform:scaleY(0.48); } 73.158% { transform:scaleY(0.24); } 73.684% { transform:scaleY(0.24); } 74.384% { transform:scaleY(0.96); } 74.826% { transform:scaleY(0.96); } 75.526% { transform:scaleY(0.24); } 76.226% { transform:scaleY(0.24); } 77.279% { transform:scaleY(0.24); } 77.984% { transform:scaleY(0.48); } 78.068% { transform:scaleY(0.48); } 78.421% { transform:scaleY(0.24); } 78.947% { transform:scaleY(0.24); } 79.647% { transform:scaleY(0.96); } 80.089% { transform:scaleY(0.96); } 80.789% { transform:scaleY(0.24); } 81.489% { transform:scaleY(0.24); } 82.542% { transform:scaleY(0.24); } 83.247% { transform:scaleY(0.36); } 83.332% { transform:scaleY(0.36); } 83.684% { transform:scaleY(0.24); } 84.211% { transform:scaleY(0.24); } 84.911% { transform:scaleY(0.96); } 85.353% { transform:scaleY(0.96); } 86.053% { transform:scaleY(0.24); } 86.753% { transform:scaleY(0.24); } 87.805% { transform:scaleY(0.24); } 88.511% { transform:scaleY(0.36); } 88.595% { transform:scaleY(0.36); } 88.947% { transform:scaleY(0.24); } 89.474% { transform:scaleY(0.24); } 90.174% { transform:scaleY(0.96); } 90.616% { transform:scaleY(0.96); } 91.316% { transform:scaleY(0.24); } 92.016% { transform:scaleY(0.24); } 93.068% { transform:scaleY(0.24); } 93.774% { transform:scaleY(0.36); } 93.858% { transform:scaleY(0.36); } 94.211% { transform:scaleY(0.24); } 94.737% { transform:scaleY(0.24); } } @keyframes craneBlockCarry { 0%, 13.2% { opacity:0; } 13.3%, 81.6% { opacity:1; } 81.7%, 100% { opacity:0; } } /* one keyframe per delivered block (114s = 18 deliveries x 6s + one settle/disassemble beat): invisible until its own delivery's release moment, stays visible while later levels build on top of it, then all 18 fade out together at 94.7-97.4% (disassemble), stay empty until the loop restarts. */ @keyframes craneSlot1 { 0%, 4.29% { opacity:0; } 4.34%, 94.7% { opacity:1; } 97.4%, 100% { opacity:0; } } @keyframes craneSlot2 { 0%, 9.55% { opacity:0; } 9.61%, 94.7% { opacity:1; } 97.4%, 100% { opacity:0; } } @keyframes craneSlot3 { 0%, 14.82% { opacity:0; } 14.87%, 94.7% { opacity:1; } 97.4%, 100% { opacity:0; } } @keyframes craneSlot4 { 0%, 20.08% { opacity:0; } 20.13%, 94.7% { opacity:1; } 97.4%, 100% { opacity:0; } } @keyframes craneSlot5 { 0%, 25.34% { opacity:0; } 25.40%, 94.7% { opacity:1; } 97.4%, 100% { opacity:0; } } @keyframes craneSlot6 { 0%, 30.60% { opacity:0; } 30.66%, 94.7% { opacity:1; } 97.4%, 100% { opacity:0; } } @keyframes craneSlot7 { 0%, 35.87% { opacity:0; } 35.92%, 94.7% { opacity:1; } 97.4%, 100% { opacity:0; } } @keyframes craneSlot8 { 0%, 41.13% { opacity:0; } 41.18%, 94.7% { opacity:1; } 97.4%, 100% { opacity:0; } } @keyframes craneSlot9 { 0%, 46.39% { opacity:0; } 46.45%, 94.7% { opacity:1; } 97.4%, 100% { opacity:0; } } @keyframes craneSlot10 { 0%, 51.66% { opacity:0; } 51.71%, 94.7% { opacity:1; } 97.4%, 100% { opacity:0; } } @keyframes craneSlot11 { 0%, 56.92% { opacity:0; } 56.97%, 94.7% { opacity:1; } 97.4%, 100% { opacity:0; } } @keyframes craneSlot12 { 0%, 62.18% { opacity:0; } 62.24%, 94.7% { opacity:1; } 97.4%, 100% { opacity:0; } } @keyframes craneSlot13 { 0%, 67.45% { opacity:0; } 67.50%, 94.7% { opacity:1; } 97.4%, 100% { opacity:0; } } @keyframes craneSlot14 { 0%, 72.71% { opacity:0; } 72.76%, 94.7% { opacity:1; } 97.4%, 100% { opacity:0; } } @keyframes craneSlot15 { 0%, 77.97% { opacity:0; } 78.03%, 94.7% { opacity:1; } 97.4%, 100% { opacity:0; } } @keyframes craneSlot16 { 0%, 83.23% { opacity:0; } 83.29%, 94.7% { opacity:1; } 97.4%, 100% { opacity:0; } } @keyframes craneSlot17 { 0%, 88.50% { opacity:0; } 88.55%, 94.7% { opacity:1; } 97.4%, 100% { opacity:0; } } @keyframes craneSlot18 { 0%, 93.76% { opacity:0; } 93.82%, 94.7% { opacity:1; } 97.4%, 100% { opacity:0; } } #spinPct { font:600 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--dim); min-height:12px; } #spin.leaving { opacity:0; transition:opacity .2s ease; } #spinProgressTrack { width:260px; height:6px; border-radius:3px; background:rgba(255,255,255,.15); overflow:hidden; display:none; } #spinTabWarning { font-size:11px; color:var(--dim); text-align:center; max-width:260px; font-style:italic; } #spinProgressTrack.active { display:block; } #spinProgressBar { height:100%; width:0%; background:var(--green); transition:width .12s ease; border-radius:3px; }