:root{--ac:#ffbe5a;--bg:rgba(16,12,9,.78);--bd:rgba(255,255,255,.12);--tx:#f3e8d6;--mu:#a89a84}
*{box-sizing:border-box}
html,body{margin:0;height:100%;height:100dvh;overflow:hidden;background:#0b0907;color:var(--tx);font:13px/1.35 "Segoe UI",system-ui,sans-serif;user-select:none}
#view{position:fixed;inset:0;display:block;cursor:grab;touch-action:none}
#view.tool{cursor:crosshair}
#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}
.glass{background:var(--bg);border:1px solid var(--bd);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 40px rgba(0,0,0,.45)}
#brand{position:fixed;left:16px;top:14px;display:flex;gap:10px;align-items:center;padding:8px 14px 8px 10px;border-radius:14px;background:var(--bg);border:1px solid var(--bd);backdrop-filter:blur(14px)}
#brand b{display:block;font-size:16px;letter-spacing:.5px;color:var(--ac)}
#brand span{font-size:11px;color:var(--mu)}
#tools{position:fixed;left:50%;top:14px;transform:translateX(-50%);display:flex;gap:4px;padding:5px;border-radius:16px;background:var(--bg);border:1px solid var(--bd);backdrop-filter:blur(14px)}
#tools button{background:transparent;border:1px solid transparent;color:var(--tx);border-radius:11px;padding:6px 10px;cursor:pointer;font-size:12px;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:58px}
#tools button span{font-size:19px;line-height:1.1}
#tools button:hover{background:rgba(255,255,255,.08)}
#tools button.on{background:rgba(255,190,90,.18);border-color:rgba(255,190,90,.6);color:#ffe2b0}
#panel{position:fixed;right:14px;top:14px;bottom:14px;width:300px;overflow:auto;border-radius:16px;background:var(--bg);border:1px solid var(--bd);backdrop-filter:blur(14px);padding:6px 14px 14px;scrollbar-width:thin;transition:transform .3s,opacity .3s}
.sec{padding:10px 0;border-bottom:1px solid var(--bd)}
.sec:last-child{border:0}
.sec h3{margin:0 0 8px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ac)}
.row{display:flex;gap:6px;margin-bottom:8px}
button{font:inherit}
.row button,.presets button{flex:1;background:rgba(255,255,255,.07);border:1px solid var(--bd);color:var(--tx);border-radius:9px;padding:7px 6px;cursor:pointer}
.row button:hover,.presets button:hover{background:rgba(255,190,90,.18);border-color:rgba(255,190,90,.5)}
.presets{display:flex;gap:4px;margin-bottom:8px}.presets button{padding:5px 2px;font-size:11px}
label{display:block;margin:7px 0;color:var(--mu);font-size:12px}
label output{float:right;color:var(--tx)}
input[type=range]{width:100%;margin:4px 0 0;accent-color:var(--ac)}
select{width:100%;margin-top:4px;background:#1c1510;color:var(--tx);border:1px solid var(--bd);border-radius:8px;padding:6px}
.tg{display:flex;align-items:center;gap:9px;padding:5px 2px;cursor:pointer;border-radius:8px}
.tg:hover{background:rgba(255,255,255,.05)}
.tg .dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 10px currentColor}
.tg .nm{flex:1}
.tg kbd{font:10px monospace;color:var(--mu);border:1px solid var(--bd);border-radius:4px;padding:0 4px}
.sw{width:32px;height:18px;border-radius:9px;background:#3a3027;position:relative;transition:.2s}
.sw::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#bbb;transition:.2s}
.tg.on .sw{background:var(--ac)}.tg.on .sw::after{left:16px;background:#fff}
.help p{margin:5px 0;color:var(--mu);font-size:11.5px}.help b{color:var(--tx)}
.help .keys{color:#cfae7a;margin-top:10px}
#stats{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:2px;padding:8px 10px;border-radius:16px;background:var(--bg);border:1px solid var(--bd);backdrop-filter:blur(14px);max-width:calc(100vw - 700px)}
.st{padding:0 10px;border-right:1px solid var(--bd);min-width:56px}.st:last-child{border:0}
.st i{display:block;font-style:normal;font-size:10px;color:var(--mu);white-space:nowrap}
.st b{font-size:18px;font-weight:600;color:#fff}
.st.sp canvas{display:block;margin-top:2px}
#nestcard{position:fixed;left:14px;bottom:14px;width:322px;padding:8px;border-radius:16px;background:var(--bg);border:1px solid var(--bd);backdrop-filter:blur(14px)}
#nestcard .cap{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ac);margin:0 0 6px 4px}
#nestcard canvas{width:100%;border-radius:10px;display:block}
#inspector{position:fixed;left:14px;top:76px;width:250px;padding:12px 14px;border-radius:14px;background:var(--bg);border:1px solid var(--bd);backdrop-filter:blur(14px);display:none}
#inspector h4{margin:0 0 6px;color:#8fe6ff;font-size:13px}
#inspector div{display:flex;justify-content:space-between;color:var(--mu);font-size:12px;padding:1px 0}#inspector div b{color:var(--tx);font-weight:500}
#inspector button{margin-top:8px;width:100%;background:rgba(120,230,255,.15);border:1px solid rgba(120,230,255,.5);color:#d6f6ff;border-radius:8px;padding:6px;cursor:pointer}
#toast{position:fixed;left:50%;top:84px;transform:translate(-50%,-10px);padding:8px 16px;border-radius:20px;background:rgba(255,190,90,.95);color:#2a1a08;font-weight:600;opacity:0;pointer-events:none;transition:.3s}
#toast.on{opacity:1;transform:translate(-50%,0)}
body.hideui #panel,body.hideui #stats,body.hideui #nestcard,body.hideui #brand{opacity:0;pointer-events:none}
@media (max-width:1200px){#stats{max-width:calc(100vw - 360px);overflow:hidden}#nestcard{display:none}}

.sheethead,#fabs{display:none}
@media (max-width:820px){
  body{font-size:14px}
  #brand,#tools,#stats,#inspector,#fabs button{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(16,12,9,.9)}
  #vignette{display:none}
  #brand{left:8px;top:calc(8px + env(safe-area-inset-top));padding:6px;border-radius:12px}
  #brand div{display:none}#brand svg{width:30px;height:30px}
  #tools{left:52px;right:8px;top:calc(8px + env(safe-area-inset-top));transform:none;overflow-x:auto;scrollbar-width:none;padding:4px;border-radius:14px}
  #tools::-webkit-scrollbar{display:none}
  #tools button{min-width:52px;padding:5px 6px;font-size:10px;flex:0 0 auto}#tools button span{font-size:20px}
  #panel{left:0;right:0;top:auto;bottom:0;width:auto;height:64dvh;border-radius:20px 20px 0 0;padding:0 16px calc(24px + env(safe-area-inset-bottom));transform:translateY(105%);z-index:20;background:rgba(16,12,9,.96);backdrop-filter:none;transition:transform .3s}
  body.sheet #panel{transform:translateY(0)}
  .sheethead{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:rgba(16,12,9,.98);padding:14px 0 8px;z-index:2}
  .sheethead .grab{position:absolute;left:50%;top:6px;width:40px;height:4px;border-radius:2px;background:#5a4d3e;transform:translateX(-50%)}
  .sheethead b{color:var(--ac);letter-spacing:1.4px;text-transform:uppercase;font-size:12px}
  .sheethead button{background:rgba(255,255,255,.1);border:0;color:var(--tx);width:34px;height:34px;border-radius:17px;font-size:16px}
  .tg{padding:9px 2px}.sw{width:40px;height:22px;border-radius:11px}.sw::after{width:18px;height:18px}.tg.on .sw::after{left:20px}
  .tg kbd,.help .keys{display:none}
  input[type=range]{height:30px}
  .row button,.presets button{padding:11px 6px;font-size:13px}
  #stats{left:8px;right:112px;bottom:calc(8px + env(safe-area-inset-bottom));transform:none;max-width:none;overflow-x:auto;padding:6px 4px;border-radius:14px;scrollbar-width:none}
  #stats::-webkit-scrollbar{display:none}
  .st{padding:0 9px;min-width:0;flex:0 0 auto}.st b{font-size:16px}.st i{font-size:9px}.st.sp{display:none}
  #nestcard{display:none}
  #inspector{left:8px;top:calc(64px + env(safe-area-inset-top));width:210px;padding:9px 11px;font-size:12px}
  #inspector div{font-size:11px}#inspector div:nth-of-type(n+4){display:none}#inspector button{padding:8px;margin-top:6px}
  #toast{top:calc(70px + env(safe-area-inset-top));max-width:90vw;text-align:center;font-size:12px}
  #fabs{display:flex;gap:8px;position:fixed;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:10}
  #fabs button{width:48px;height:48px;border-radius:24px;border:1px solid var(--bd);background:var(--bg);color:var(--ac);font-size:20px;backdrop-filter:blur(10px)}
  body.sheet #fabs{display:none}
  body.sheet #stats{display:none}
}