@font-face{font-family:Geist;src:url(/lab/grid-studio/fonts/Geist-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}@font-face{font-family:Geist Mono;src:url(/lab/grid-studio/fonts/GeistMono-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}@font-face{font-family:"Instrument Serif";src:url(/lab/grid-studio/fonts/instrument-serif-regular-latin.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:"Instrument Serif";src:url(/lab/grid-studio/fonts/instrument-serif-italic-latin.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}:root{--bg: #151515;--panel: #fffcf6;--panel-2: #f7f4ee;--field: #fffdf9;--ink: #151515;--muted: #65655b;--forest: #243128;--primary: #546257;--error: #8a3b2e;--line: rgba(217, 210, 195, .55);--hairline: rgba(217, 210, 195, .35);--dk-line: rgba(247, 244, 238, .16);--dk-ink: rgba(247, 244, 238, .88);--dk-muted: rgba(247, 244, 238, .55);--sans: "Geist", "Helvetica Neue", Arial, sans-serif;--mono: "Geist Mono", ui-monospace, "SF Mono", monospace;--serif: "Instrument Serif", Georgia, serif;--ease: cubic-bezier(.32, .72, 0, 1)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}::selection{background:#d9d2c373;color:var(--ink)}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:1px solid var(--primary);outline-offset:2px}.panel__sub,.tab,.formsection,.label,.famhead,.check,.seg__btn,.btn,.tbtn,.layoutlabel,.score,.menu__item,.selection-label,.edit-hint,.thumb__name{font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em}.app{display:grid;grid-template-columns:340px 1fr;height:100dvh;overflow:hidden}.panel{background:var(--panel);border-right:1px solid var(--hairline);display:flex;flex-direction:column;overflow:hidden}.panel__head{padding:20px 18px 14px;border-bottom:1px solid var(--hairline)}.panel__back{display:inline-flex;align-items:center;gap:6px;margin:-6px 0 8px;padding:6px 0;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition-property:color;transition-duration:.25s;position:relative}.panel__back:after{content:"";position:absolute;top:-12px;right:-12px;bottom:-12px;left:0}.panel__back:hover,.panel__back:focus-visible{color:var(--primary)}.panel__title{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1;letter-spacing:-.005em;color:var(--ink)}.panel__sub{font-size:9px;color:var(--muted);margin-top:7px}.panel__body{overflow-y:auto;padding:16px 18px 40px;flex:1;scrollbar-width:thin;scrollbar-color:rgba(217,210,195,.7) transparent}.panel__body::-webkit-scrollbar{width:10px}.panel__body::-webkit-scrollbar-thumb{background:#d9d2c3b3;border-radius:999px;border:3px solid var(--panel)}.tabs{display:flex;gap:0;border-bottom:1px solid var(--hairline)}.tab{flex:1;padding:13px 2px;font-size:9.5px;background:none;border:none;border-bottom:1.5px solid transparent;color:var(--muted);cursor:pointer;transition-property:color,border-color;transition-duration:.3s;transition-timing-function:var(--ease)}.tab:hover{color:var(--ink)}.tab--active{color:var(--ink);border-bottom-color:var(--ink)}.formsection{font-size:10px;color:var(--ink);padding-bottom:7px;margin:4px 0 12px;border-bottom:1px solid var(--hairline)}.formsection:not(:first-child){margin-top:24px}.field{margin-bottom:14px}.label{display:block;font-size:9px;color:var(--muted);margin-bottom:6px}input[type=text],textarea,select{width:100%;font-family:var(--sans);font-size:13px;padding:8px 11px;border:1px solid var(--line);background:var(--field);color:var(--ink);border-radius:10px;caret-color:var(--primary);transition-property:border-color;transition-duration:.3s;transition-timing-function:var(--ease)}textarea{resize:vertical;min-height:54px;line-height:1.45;field-sizing:content}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--primary)}input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--field) inset;-webkit-text-fill-color:var(--ink);caret-color:var(--primary)}.famgroup{margin-bottom:20px}.famhead{display:flex;align-items:baseline;justify-content:space-between;font-size:9px;color:var(--ink);padding-bottom:7px;margin-bottom:10px;border-bottom:1px solid var(--hairline)}.famcount{color:var(--muted);font-variant-numeric:tabular-nums}.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:10px}.thumb{display:flex;flex-direction:column;gap:6px;min-width:0;padding:0;border:none;background:none;cursor:pointer;text-align:left}.thumb__poster{display:block;width:100%;min-width:0;aspect-ratio:210 / 297;overflow:hidden;background:#fff;border-radius:6px;outline:1px solid rgba(0,0,0,.1);outline-offset:-1px;box-shadow:0 1px 2px #1515150d,0 6px 16px -8px #2431281f;transition-property:box-shadow,outline-color,transform;transition-duration:.3s;transition-timing-function:var(--ease)}.thumb__poster svg{width:100%;height:100%;display:block}.thumb:hover .thumb__poster{outline-color:#0003;box-shadow:0 2px 4px #1515150f,0 10px 24px -10px #24312833;transform:translateY(-1px)}.thumb:active .thumb__poster{transform:translateY(0) scale(.98)}.thumb--active .thumb__poster{outline:2px solid var(--primary);outline-offset:1px}.thumb__name{display:block;width:100%;min-width:0;font-size:8.5px;letter-spacing:.12em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.thumb__meta{display:block;width:100%;min-width:0;margin-top:-3px;font-family:var(--mono);font-size:8px;line-height:1.3;color:#65655b99;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.thumb--active .thumb__name{color:var(--ink)}.thumb--active .thumb__meta{color:var(--muted)}.btn{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.2em;padding:11px 16px;border:1px solid rgba(21,21,21,.35);background:transparent;color:var(--ink);cursor:pointer;border-radius:999px;transition-property:background-color,border-color,color,transform;transition-duration:.3s;transition-timing-function:var(--ease)}.btn:hover{background:var(--forest);border-color:var(--forest);color:var(--panel-2)}.btn:active{transform:scale(.96)}.btn--full{width:100%;margin-top:8px}.btn--solid{background:var(--forest);border-color:var(--forest);color:var(--panel-2)}.btn--solid:hover{background:var(--ink);border-color:var(--ink)}.btn-row{display:flex;gap:8px}.btn-row .btn{flex:1}.stage{position:relative;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}.stage__canvas{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:40px;overflow:hidden}.poster{width:100%;height:100%;display:block}.poster svg{width:100%;height:100%;display:block;filter:drop-shadow(0 24px 48px rgba(0,0,0,.42)) drop-shadow(0 4px 12px rgba(0,0,0,.3))}.editor-layer{position:absolute;z-index:4;pointer-events:auto}.editor-box{position:absolute;display:block;padding:0;border:1px solid rgba(127,161,137,.75);background:#5462571a;border-radius:3px;cursor:move;color:#fff;box-shadow:0 0 0 1px #ffffff59 inset;transition-property:border-color,background-color,box-shadow;transition-duration:.3s;transition-timing-function:var(--ease)}.editor-box span{position:absolute;left:0;top:0;transform:translateY(-100%);padding:4px 7px;font-family:var(--mono);font-size:8.5px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:var(--panel-2);background:var(--primary);border-radius:4px 4px 4px 0;pointer-events:none;opacity:0;transition-property:opacity;transition-duration:.3s;transition-timing-function:var(--ease)}.editor-box:hover,.editor-box--selected{border-color:#fff;background:#5462572e;box-shadow:0 0 0 1px var(--primary),0 0 0 4px #54625740}.editor-box:hover span,.editor-box--selected span{opacity:1}.toolbar{display:flex;align-items:center;gap:8px;row-gap:8px;flex-wrap:wrap;padding:12px 18px;background:#121211f5;border-top:1px solid var(--dk-line)}.toolbar .menu{margin-left:auto}.toolbar .tbtn,.edit-inspector .tbtn{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.2em;padding:10px 15px;border:1px solid var(--dk-line);background:transparent;color:var(--dk-ink);cursor:pointer;border-radius:999px;transition-property:background-color,border-color,color,transform;transition-duration:.3s;transition-timing-function:var(--ease)}.toolbar .tbtn:hover,.edit-inspector .tbtn:hover{border-color:#f7f4ee73;background:#f7f4ee0f;color:#fff}.toolbar .tbtn:active,.edit-inspector .tbtn:active{transform:scale(.96)}.toolbar .tbtn:disabled,.edit-inspector .tbtn:disabled{opacity:.35;cursor:not-allowed;transform:none}.toolbar .tbtn--active{border-color:var(--panel-2);background:var(--panel-2);color:var(--ink)}.toolbar .layoutlabel{font-size:10px;color:var(--dk-muted);letter-spacing:.14em;font-variant-numeric:tabular-nums;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}.toolbar .layoutlabel b{color:var(--dk-ink);font-weight:600}.toolbar .score{font-size:10px;letter-spacing:.14em;font-variant-numeric:tabular-nums;color:#a9c4af;border:1px solid rgba(169,196,175,.35);padding:9px 13px;border-radius:999px;white-space:nowrap;transition-property:color,border-color;transition-duration:.5s;transition-timing-function:var(--ease)}.toolbar .score--strong{color:#c4dcc9;border-color:#c4dcc980}.toolbar .score--weak{color:#d9a08f;border-color:#d9a08f73}.edit-inspector{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 18px 10px;background:#121211f5;border-top:1px solid rgba(247,244,238,.08)}.selection-label{font-size:9px;color:var(--dk-ink);letter-spacing:.16em;border:1px solid var(--dk-line);padding:9px 13px;border-radius:999px}.edit-hint{margin-left:auto;font-size:9px;color:var(--dk-muted);letter-spacing:.14em}.menu{position:relative}.menu__list{position:absolute;bottom:calc(100% + 8px);right:0;background:#181816fa;border:1px solid var(--dk-line);border-radius:16px;padding:6px;min-width:210px;z-index:10;box-shadow:0 24px 60px -20px #0009,0 4px 16px #00000059}.menu__item{display:block;width:100%;text-align:left;padding:11px 13px;font-size:9.5px;letter-spacing:.16em;background:none;border:none;border-radius:10px;color:var(--dk-ink);cursor:pointer;transition-property:background-color,color;transition-duration:.3s;transition-timing-function:var(--ease)}.menu__item:hover{background:#f7f4ee14;color:#fff}.range{width:100%;accent-color:var(--primary)}.inline{display:flex;gap:8px;align-items:center}.inline>*{flex:1}.check{display:flex;align-items:center;gap:8px;font-size:9.5px;letter-spacing:.16em;color:var(--ink);cursor:pointer;margin-bottom:8px;min-height:28px}.check input{width:auto;accent-color:var(--primary)}.seg{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:3px;background:var(--field)}.seg__btn{flex:1;padding:7px 4px;font-size:9px;letter-spacing:.12em;background:transparent;border:none;border-radius:999px;color:var(--muted);cursor:pointer;transition-property:background-color,color;transition-duration:.3s;transition-timing-function:var(--ease)}.seg__btn:hover{color:var(--ink)}.seg__btn--active{background:var(--forest);color:var(--panel-2)}.swatches{display:flex;flex-wrap:wrap;gap:8px}.swatch{position:relative;width:26px;height:26px;border:1px solid var(--line);border-radius:999px;cursor:pointer;transition-property:transform;transition-duration:.3s;transition-timing-function:var(--ease)}.swatch:after{content:"";position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px}.swatch:hover{transform:scale(1.08)}.swatch--active{outline:2px solid var(--primary);outline-offset:2px}.color-row{display:flex;align-items:center;gap:8px}.color-row .swatches{flex:1}.color-input{width:34px;height:28px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--field);cursor:pointer}.hint{font-size:11px;color:var(--muted);line-height:1.5;margin-top:6px;text-wrap:pretty}@media (max-width: 900px){.app{grid-template-columns:1fr;grid-template-rows:minmax(420px,58dvh) auto;height:auto;min-height:100dvh;overflow:auto}.stage{grid-row:1;min-height:420px}.panel{grid-row:2;border-right:none;border-top:1px solid var(--hairline);overflow:visible}.panel__body{max-height:none;overflow:visible}.stage__canvas{padding:18px}.toolbar{padding:10px}.edit-inspector{padding:8px 10px}.toolbar .menu{margin-left:0}.edit-hint{width:100%;margin-left:0}.tab,.btn,.toolbar .tbtn,.edit-inspector .tbtn{min-height:44px}}@media (max-width: 520px){.tabs{flex-wrap:wrap}.tab{flex:1 0 50%}.thumbs{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}.inline{flex-direction:column;align-items:stretch}}@view-transition{navigation: auto;}@media (prefers-reduced-motion: reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}