:root{color-scheme:light only;--paper:#f6f4ee;--ink:#1b1b1f;--minor:#4078be21;--major:#4078be42}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--paper);color:var(--ink);-webkit-tap-highlight-color:transparent;font-family:SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,system-ui,sans-serif;overflow:hidden}body:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(120% 90% at 15% 8%, #fff9, transparent 60%), radial-gradient(140% 120% at 100% 100%, #6e5a3c1a, transparent 55%), linear-gradient(to right, var(--major) 1px, transparent 1px) center / 100px 100px, linear-gradient(to bottom, var(--major) 1px, transparent 1px) center / 100px 100px, linear-gradient(to right, var(--minor) 1px, transparent 1px) center / 20px 20px, linear-gradient(to bottom, var(--minor) 1px, transparent 1px) center / 20px 20px, var(--paper);position:fixed;inset:0}body:after{content:"";z-index:-1;pointer-events:none;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .38 0 0 0 0 .3 .16 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/220px 220px;position:fixed;inset:0}.brand{aspect-ratio:1;width:48px;color:var(--ink);opacity:.8;place-items:center;transition:opacity .2s;display:grid;position:fixed;top:1rem;left:1rem}.brand svg{width:26px;height:auto;transition:rotate .5s cubic-bezier(.34,1.56,.64,1),scale .5s cubic-bezier(.34,1.56,.64,1)}.brand:is(:hover,:focus-visible){opacity:1}.brand:is(:hover,:focus-visible) svg{rotate:-8deg;scale:1.08}.menu{z-index:10;font-family:ui-monospace,SF Mono,Cascadia Mono,Menlo,Consolas,monospace;position:fixed;top:1rem;right:1rem}.menu-toggle{width:48px;height:48px;color:var(--ink);opacity:.8;cursor:pointer;background:0 0;border:0;place-items:center;padding:0;transition:opacity .2s;display:grid;position:relative}.menu-toggle:is(:hover,:focus-visible),.menu[data-open=true] .menu-toggle{opacity:1}.menu-toggle span{background:currentColor;border-radius:1px;width:20px;height:1.5px;transition:translate .35s cubic-bezier(.34,1.56,.64,1),rotate .35s cubic-bezier(.34,1.56,.64,1);position:absolute}.menu-toggle span:first-child{translate:0 -3.5px}.menu-toggle span:last-child{translate:0 3.5px}.menu[data-open=true] .menu-toggle span:first-child{translate:0;rotate:45deg}.menu[data-open=true] .menu-toggle span:last-child{translate:0;rotate:-45deg}.menu-panel{overscroll-behavior:contain;backdrop-filter:blur(12px);transform-origin:100% 0;scrollbar-width:thin;background:#fbfaf6e6;border:1px solid #1b1b1f14;border-radius:14px;width:300px;max-height:calc(100dvh - 5.5rem);padding:12px;transition:opacity .2s,scale .3s cubic-bezier(.2,.9,.3,1.15),translate .3s cubic-bezier(.2,.9,.3,1.15),visibility;position:absolute;top:52px;right:0;overflow:auto;box-shadow:0 18px 40px -16px #3c2d144d,0 2px 6px #3c2d140f}.menu[data-open=false] .menu-panel{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,scale .2s,translate .2s,visibility 0s .2s;translate:0 -6px;scale:.96}.menu-panel section+section{margin-top:14px}.menu-panel header{justify-content:space-between;align-items:center;gap:8px;margin:0 2px 8px;display:flex}.menu-panel h2{letter-spacing:.08em;text-transform:uppercase;color:#1b1b1f80;margin:0;font-size:10px;font-weight:500}.menu-actions{gap:4px;display:flex}.menu-actions button{color:var(--ink);font:inherit;cursor:pointer;background:#1b1b1f0f;border:0;border-radius:6px;padding:4px 8px;font-size:10px;transition:background .15s}.menu-actions button:is(:hover,:focus-visible){background:#1b1b1f1f}.palette{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;display:grid}.palette-item{aspect-ratio:1;cursor:pointer;background:#1b1b1f0a;border:0;border-radius:10px;padding:7px;transition:background .15s,scale .3s cubic-bezier(.34,1.56,.64,1),rotate .3s cubic-bezier(.34,1.56,.64,1)}.palette-item:is(:hover,:focus-visible){background:#1b1b1f14;rotate:-4deg;scale:1.08}.palette-item:active{scale:.94}.palette-item img{object-fit:contain;pointer-events:none;filter:drop-shadow(1.5px 0 #fff)drop-shadow(-1.5px 0 #fff)drop-shadow(0 1.5px #fff)drop-shadow(0 -1.5px #fff)drop-shadow(0 1px 1.5px #00000040);width:100%;height:100%}.config{--tp-base-background-color:transparent;--tp-base-shadow-color:transparent;--tp-base-border-radius:8px;--tp-base-font-family:ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;--tp-blade-border-radius:6px;--tp-blade-value-width:150px;--tp-button-background-color:#1b1b1f14;--tp-button-background-color-hover:#1b1b1f1f;--tp-button-background-color-focus:#1b1b1f24;--tp-button-background-color-active:#1b1b1f2e;--tp-button-foreground-color:#1b1b1f;--tp-container-background-color:#1b1b1f0d;--tp-container-background-color-hover:#1b1b1f14;--tp-container-background-color-focus:#1b1b1f1a;--tp-container-background-color-active:#1b1b1f1f;--tp-container-foreground-color:#1b1b1f;--tp-groove-foreground-color:#1b1b1f1a;--tp-input-background-color:#1b1b1f0f;--tp-input-background-color-hover:#1b1b1f17;--tp-input-background-color-focus:#1b1b1f1f;--tp-input-background-color-active:#1b1b1f24;--tp-input-foreground-color:#1b1b1f;--tp-label-foreground-color:#1b1b1f99;--tp-monitor-background-color:#1b1b1f0d;--tp-monitor-foreground-color:#1b1b1fb3}@media (width<=600px){.menu-panel{width:calc(100vw - 2rem);max-height:72dvh}.palette{grid-template-columns:repeat(6,minmax(0,1fr))}}.hint{left:50%;bottom:max(1.25rem, env(safe-area-inset-bottom));width:max-content;max-width:calc(100vw - 2rem);color:color-mix(in hsl, canvasText, transparent 40%);pointer-events:none;margin:0;font-size:.8rem;transition:opacity .6s;position:fixed;translate:-50%}.hint.is-gone{opacity:0}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.brand svg,.menu-toggle span,.menu-panel,.palette-item{transition:none}}