210px);max-height:calc(100dvh - var(--shelfH) - 210px); background:var(--glass2);border:1px solid var(--gold);border-radius:14px;display:none;grid-template-rows:auto 1fr; box-shadow:0 -6px 30px rgba(0,0,0,0.6);transform:translateY(16px);opacity:0;transition:transform .18s ease, opacity .18s ease;} body.phone #sheet.open{display:grid;transform:translateY(0);opacity:1;} body.phone #sheet-head{display:grid;grid-template-columns:1fr 48px;align-items:center;padding:4px 4px 4px 12px;border-bottom:1px solid var(--line);} body.phone #sheet-head span{font-size:12px;letter-spacing:2px;color:var(--gold2);font-weight:700;} body.phone #sheet-body{min-height:0;} body.phone .wheel{width:132px;height:132px;} /* short phones (landscape): one-row shelf, sheet sits between rail and card */ @media (max-height:520px){ body.phone #shelf{grid-template-columns:3fr 1.3fr;align-items:stretch;} body.phone #shelf .ttl{display:none;} body.phone #bigexport{min-height:52px;font-size:13px;} body.phone #sheet{top:58px;max-height:none;right:calc(min(232px, 100vw - 112px) + 12px);} } /* ======================= STUDIO ======================= */ body.studio .phone-only{display:none !important;} body.studio #studio-only{display:contents;} body.studio #app{position:fixed;inset:0;left:0;top:0;right:0;bottom:0;display:grid; grid-template-columns:minmax(210px,260px) 1fr minmax(250px,310px); grid-template-rows:56px minmax(0,1fr) minmax(170px,32vh) 60px;grid-gap:6px;padding:6px; background:radial-gradient(ellipse at top,#16120a,#07070c 70%);} body.studio .panel{background:var(--glass);border:1px solid var(--line);border-radius:12px;min-height:0;min-width:0;} body.studio #s-top{grid-column:1 / 4;grid-row:1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;grid-gap:10px;padding:0 10px;} body.studio #s-top h1{margin:0;font-size:18px;letter-spacing:3px;color:#f6e3a8;white-space:nowrap;} body.studio #s-top h1 small{font-size:11px;color:#c9a64a;letter-spacing:1px;margin-left:6px;} body.studio #tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(84px,max-content);grid-gap:6px;overflow-x:auto;justify-content:start;} body.studio #tabs .btn{flex-direction:row;font-size:12px;letter-spacing:1.5px;padding:6px 12px;} body.studio #tabs .btn .ic{margin:0 6px 0 0;font-size:16px;} body.studio #s-top .ur{display:grid;grid-template-columns:repeat(2,64px);grid-gap:6px;} body.studio #s-left{grid-column:1;grid-row:2;} body.studio #viewport{grid-column:2;grid-row:2;position:relative;border-radius:12px;border:1px solid var(--line);} body.studio #s-right{grid-column:3;grid-row:2 / 4;} body.studio #s-bottom{grid-column:1 / 3;grid-row:3;display:grid;grid-template-columns:minmax(220px,1.5fr) minmax(220px,1.2fr) minmax(200px,1fr) minmax(240px,1.3fr);grid-gap:6px;min-height:0;overflow-x:auto;} body.studio #s-bottom > div{min-height:0;} body.studio #s-foot{grid-column:1 / 4;grid-row:4;display:grid;grid-template-columns:auto auto auto 1fr minmax(260px,420px);grid-gap:8px;align-items:center;padding:0 6px;} body.studio #s-foot .proj{font-size:12px;color:#c9a64a;letter-spacing:1px;padding:0 8px;} body.studio #s-foot .btn{flex-direction:row;} body.studio #s-foot .btn .ic{margin:0 6px 0 0;} body.studio #s-export{min-height:48px;font-size:15px;letter-spacing:1px;} body.studio #vp-status{position:absolute;left:10px;top:10px;right:10px;z-index:3;pointer-events:none; background:rgba(8,7,5,0.6);border:1px solid rgba(216,169,32,0.35);border-radius:8px;padding:6px 10px;max-width:70%;} body.studio #vp-tools{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:3;max-width:calc(100% - 20px); display:grid;grid-auto-flow:column;grid-auto-columns:64px;grid-gap:6px;overflow-x:auto;padding:6px; background:var(--glass);border:1px solid var(--line);border-radius:12px;} body.studio #vp-tools .btn{min-height:56px;font-size:11px;} body.studio .wheel{width:130px;height:130px;}