@font-face{font-family:Tempel Regular;src:url(/fonts/tempel-grotesk-regular.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:Kommissar;src:url(/fonts/kommissar-bold.otf) format("opentype");font-weight:700;font-display:swap}.portal-shell:has(.s31-root)>:is(.portal-header,.portal-footer){display:none}.s31-root,.s31-sheet,.s31-tone{--t-stage:#e8e8e6;--t-card:#ffffff;--t-dark:#1b1b1b;--t-panel:#171717;--t-row:#232323;--t-row-2:#2c2c2c;--t-line:#2f2f2f;--t-ink:#f2f2f0;--t-muted:#8e8e8b;--t-yellow:#faed60;--t-radius:12px;--t-pop:#1e1e1e;--t-pop-line:#333333;--t-ring:rgb(255 255 255/0.16);--t-dot:#555555;--t-knob:#3a3a3a;--t-on:#343434;--t-sheet:#1b1b1b;--t-well:#262626}.s31-root{position:fixed;inset:0;z-index:50;overflow:hidden;color:var(--t-dark);background:var(--t-stage);font:400 13px/1.4 var(--font-body),sans-serif}.s31-root button,.s31-root input,.s31-sheet button,.s31-tone button,.s31-tone input{font:inherit;color:inherit}.s31-root :focus-visible,.s31-sheet :focus-visible,.s31-tone :focus-visible{outline:2px solid var(--t-yellow);outline-offset:2px}.s31-studio{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;height:100%;padding:12px}.s31-stage-wrap{position:relative;min-width:0;min-height:0}.s31-stage{position:absolute;inset:0;overflow:auto;padding-bottom:96px;border-radius:18px;container:stage/inline-size}.s31-panel{display:flex;flex-direction:column;min-height:0;color:var(--t-ink);background:var(--t-panel);border-radius:18px;overflow:hidden}.s31-panel-head{display:flex;align-items:center;gap:6px;min-height:60px;padding:14px 14px 10px 18px}.s31-panel-head .s31-icon{margin-left:-8px}.s31-panel-head .s31-panel-close{margin:0 -6px 0 2px}.s31-panel-title+.s31-panel-close{margin-left:auto}.s31-panel-title{margin:0;overflow:hidden;font-size:17px;font-weight:500;white-space:nowrap;text-overflow:ellipsis}.s31-panel-body{display:grid;flex:1 1;align-content:start;gap:20px;padding:2px 12px 20px;overflow:auto}.s31-panel-foot{display:flex;align-items:center;gap:2px;padding:12px;border-top:1px solid var(--t-line)}.s31-panel-note{margin:0 6px;color:var(--t-muted)}.s31-section{display:grid;gap:8px}.s31-section-title{margin:0;padding:0 6px;font-size:13px;font-weight:500}.s31-rows{display:grid;gap:6px}.s31-row-wrap{display:grid;gap:4px}.s31-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 6px 0 14px;background:var(--t-row);border-radius:var(--t-radius)}.s31-row-label{flex:none;color:var(--t-muted)}.s31-row-value{display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:0}.s31-row-note{margin:0 14px;color:var(--t-muted);font-size:12px}.s31-menu-trigger{display:inline-flex;align-items:center;gap:8px;min-width:0;padding:6px 8px;background:none;border:0;border-radius:8px;cursor:pointer}.s31-menu-trigger>span:not(.s31-dot){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.s31-menu-trigger:hover,.s31-menu-trigger[data-state=open]{background:var(--t-row-2)}.s31-menu-trigger svg{flex:none;color:var(--t-muted)}.s31-menu,.s31-popover{z-index:100;color:var(--t-ink);background:var(--t-pop);border:1px solid var(--t-pop-line);border-radius:14px;box-shadow:0 16px 48px rgb(0 0 0/.35);font:400 13px/1.4 var(--font-body),sans-serif}.s31-menu{min-width:200px;max-height:min(420px,70vh);padding:4px;overflow:auto}.s31-menu-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;outline:none;cursor:pointer}.s31-menu-item[data-highlighted]{background:var(--t-row-2)}.s31-menu-item.is-danger{color:#ff8a80}.s31-menu-hint{margin-left:auto;color:var(--t-muted);font:11px/1 var(--font-mono),monospace}.s31-menu-check{margin-left:auto;display:inline-flex}.s31-menu-hint+.s31-menu-check{margin-left:8px}.s31-dot{flex:none;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--t-ring)}.s31-scrub{position:relative;flex:none;width:172px;height:32px;border-radius:9px;background:radial-gradient(circle,var(--t-dot) 1.2px,transparent 1.7px) 6px 50% /13px 13px repeat-x;cursor:ew-resize;touch-action:none}.s31-scrub-value{position:absolute;top:3px;bottom:3px;display:grid;place-items:center;width:56px;font:500 12px/1 var(--font-mono),monospace;background:var(--t-knob);border-radius:7px;pointer-events:none}.s31-cell,.s31-scrub-input{width:172px;height:32px;padding:0 10px;color:var(--t-ink);font:500 12px/1 var(--font-mono),monospace;background:var(--t-row-2);border:0;border-radius:9px;outline:none}.s31-cell{width:100%;text-align:center}.s31-cell[data-overridden]{box-shadow:inset 0 0 0 1px var(--t-yellow)}.s31-cell:focus{box-shadow:inset 0 0 0 1px var(--t-ink)}.s31-segmented{display:flex;gap:2px}.s31-segmented button{padding:8px 14px;color:var(--t-muted);font-weight:500;background:none;border:0;border-radius:10px;cursor:pointer}.s31-segmented button[aria-checked=true]{color:var(--t-ink);background:var(--t-on)}.s31-color{display:inline-flex;align-items:center;gap:6px}.s31-color-chip{width:24px;height:24px;padding:0;box-shadow:inset 0 0 0 1px var(--t-ring);cursor:pointer}.s31-color-chip,.s31-hex{border:0;border-radius:7px}.s31-hex{width:78px;padding:6px 4px;font:500 12px/1 var(--font-mono),monospace;text-transform:uppercase;background:none;outline:none}.s31-hex:focus{background:var(--t-row-2)}.s31-picker{width:240px;padding:12px}.s31-picker-body{display:grid;gap:10px}.s31-picker-pad{position:relative;height:160px;border-radius:10px;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,transparent);cursor:crosshair;touch-action:none}.s31-picker-hue span,.s31-picker-pad span{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgb(0 0 0/.35);pointer-events:none}.s31-picker-hue{position:relative;height:12px;border-radius:999px;background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);cursor:ew-resize;touch-action:none}.s31-picker-hue span{top:50%}.s31-fonts{display:grid;gap:8px;width:300px;padding:10px}.s31-rename,.s31-search{height:36px;padding:0 12px;color:inherit;background:var(--t-row-2);border:0;border-radius:10px;outline:none}.s31-search::-webkit-search-cancel-button{appearance:none}.s31-font-list{display:grid;max-height:340px;overflow:auto}.s31-list-title{margin:8px 8px 4px;color:var(--t-muted);font-size:11px}.s31-font-option{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 8px;text-align:left;background:none;border:0;border-radius:9px;cursor:pointer}.s31-font-option:hover,.s31-font-option[aria-selected=true]{background:var(--t-row-2)}.s31-font-aa{font-size:22px;line-height:1}.s31-font-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.s31-font-source{color:var(--t-muted);font-size:11px}.s31-strip{display:flex;height:44px;overflow:hidden;border-radius:var(--t-radius)}.s31-strip button{flex:1 1;min-width:0;padding:0;border:0;cursor:pointer}.s31-strip button[aria-checked=true]{box-shadow:inset 0 0 0 2px var(--t-ink),inset 0 0 0 4px rgb(0 0 0/.35)}.s31-strip .s31-strip-add{display:grid;flex:0 0 44px;place-items:center;color:var(--t-dark);background:var(--t-ink)}.s31-disclosure{display:grid;gap:8px}.s31-disclosure-head{display:flex;align-items:center;gap:10px;width:100%;padding:12px 6px;font-size:14px;font-weight:500;text-align:left;background:none;border:0;border-bottom:1px solid var(--t-line);cursor:pointer}.s31-disclosure-icon{display:grid;place-items:center;width:18px;color:var(--t-muted)}.s31-chevron{margin-left:auto;color:var(--t-muted);transform:rotate(-90deg)}.s31-disclosure[data-open] .s31-chevron{transform:none}.s31-aa{font-size:11px;font-weight:600}.s31-table{display:grid;gap:4px}.s31-table-head,.s31-table-row{display:grid;grid-template-columns:52px 1fr 1fr;align-items:center;gap:4px;padding:0 4px 0 14px}.s31-table-head{color:var(--t-muted);font-size:11px}.s31-table-head span:not(:first-child){text-align:center}.s31-table-row.is-two{grid-template-columns:52px 1fr}.s31-table-row.is-three{grid-template-columns:repeat(3,1fr);padding:0 4px}.s31-cell-label{display:grid;gap:4px;color:var(--t-muted);font-size:11px;text-align:center}.s31-font-group{display:grid;gap:6px}.s31-ramp{display:grid;grid-template-columns:repeat(10,1fr);height:24px;overflow:hidden;border-radius:8px}.s31-add-row{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px;color:var(--t-muted);background:none;border:1px dashed var(--t-knob);border-radius:var(--t-radius);cursor:pointer}.s31-add-row:hover{color:var(--t-ink)}.s31-icon{display:inline-grid;flex:none;place-items:center;width:34px;height:34px;padding:0;color:inherit;background:transparent;border:0;border-radius:10px;cursor:pointer}.s31-icon:hover,.s31-icon[aria-pressed=true]{background:rgb(127 127 127/.2)}.s31-icon-quiet{width:26px;height:26px;color:var(--t-muted)}.s31-text-button{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:6px 8px;font-weight:500;background:none;border:0;border-radius:8px;cursor:pointer}.s31-text-button:hover{background:var(--t-row)}.s31-export{height:42px;margin-left:auto;padding:0 24px;color:var(--t-dark)!important;font-size:14px!important;font-weight:500!important;background:var(--t-yellow);border:0;border-radius:var(--t-radius);cursor:pointer}.s31-pill{position:absolute;bottom:16px;left:50%;z-index:10;display:flex;gap:6px;transform:translateX(-50%)}.s31-pill-group{display:flex;align-items:center;gap:2px;padding:4px;color:var(--t-ink);background:var(--t-panel);border-radius:14px;box-shadow:0 8px 24px rgb(0 0 0/.18)}.s31-pill-group .s31-menu-trigger{padding:8px 12px}.s31-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.s31-compare-col{display:grid;align-content:start;gap:10px;min-width:0}.s31-compare-name{margin:0;padding:16px 0 0 4px;font-size:13px;font-weight:500}.s31-compare-col:first-child .s31-compare-name{padding-left:52px}.s31-library,.s31-projects{height:100%;overflow:auto}.s31-projects-head{display:flex;align-items:center;gap:10px;padding:20px 28px 0}.s31-projects-title{margin:0;font-size:15px;font-weight:500}.s31-projects-head .version-switch{margin-left:auto}.s31-projects-head .version-switch+.s31-new{margin-left:0}.s31-new{display:grid;place-items:center;width:44px;height:44px;margin-left:auto;color:var(--t-dark);background:var(--t-card);border:0;border-radius:var(--t-radius);box-shadow:0 1px 3px rgb(0 0 0/.1);cursor:pointer}.s31-project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin:0;padding:24px 28px 64px;list-style:none}.s31-project{display:grid;gap:12px;padding:14px;background:var(--t-card);border-radius:18px}.s31-project-head{display:flex;align-items:center;gap:8px;min-height:34px;padding-left:4px}.s31-project-name{font-size:14px;font-weight:500}.s31-project-time{color:#7a7a78;font-size:12px}.s31-project-head .s31-icon{margin-left:auto}.s31-rename{flex:1 1;color:var(--t-dark);background:var(--t-stage)}.s31-project-sample{display:grid;place-items:center;aspect-ratio:4/3;padding:24px;border:0;border-radius:12px;cursor:pointer}.s31-project-sample:hover{box-shadow:inset 0 0 0 2px rgb(0 0 0/.08)}.s31-project-art{display:grid;justify-items:center;gap:18px;text-align:center}.s31-project-dots{display:flex;gap:6px}.s31-project-dots span{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(0 0 0/.1)}.s31-empty{padding:120px 28px;color:#7a7a78;text-align:center}.l-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px;padding:24px 28px 64px}.l-specimen{display:grid;align-content:start;gap:14px;padding:18px;background:var(--t-card);border-radius:18px}.l-specimen h2{margin:0;font-size:15px;font-weight:500}.l-specimen p{margin:2px 0 0;color:#7a7a78}.l-panel{display:grid;height:440px}.l-stage{position:relative;height:120px;background:var(--t-stage);border-radius:12px}.s31-sheet-overlay{position:fixed;inset:0;z-index:200;background:rgb(0 0 0/.45)}.s31-sheet{position:fixed;bottom:0;left:50%;z-index:201;display:grid;gap:18px;width:min(640px,calc(100vw - 24px));max-height:calc(100vh - 40px);padding:40px 48px 36px;overflow:auto;color:var(--t-ink);background:var(--t-sheet);border-radius:22px 22px 0 0;transform:translateX(-50%);font:400 14px/1.45 var(--font-body),sans-serif}.s31-sheet-close{position:absolute;top:16px;right:16px}.s31-sheet-title{margin:0;font-size:30px;font-weight:500;letter-spacing:-.01em}.s31-files{display:grid;gap:10px;margin:0;padding:16px 18px;list-style:none;background:var(--t-well);border-radius:14px}.s31-files li{display:grid;grid-template-columns:20px auto 1fr;align-items:center;gap:10px}.s31-files li span:last-child{color:var(--t-muted);text-align:right}.s31-sheet .s31-segmented{padding:4px;background:var(--t-well);border-radius:14px}.s31-sheet .s31-segmented button{flex:1 1}.s31-code{max-height:140px;margin:0;padding:16px;overflow:auto;font:12px/1.6 var(--font-mono),monospace;white-space:pre-wrap;background:var(--t-well);border-radius:14px}.s31-code.is-tall{max-height:260px}.s31-sheet-note{margin:0;color:var(--t-muted)}.s31-sheet-action{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;color:var(--t-dark)!important;font-size:15px!important;font-weight:500;background:var(--t-ink);border:0;border-radius:14px;cursor:pointer}@media (max-width:900px){.s31-studio{grid-template-rows:minmax(0,1fr) 46vh}.s31-compare,.s31-studio{grid-template-columns:minmax(0,1fr)}}@media (prefers-reduced-motion:reduce){.s31-root *,.s31-sheet *{transition:none!important;animation:none!important}}