.cp-panel{width:320px;max-width:100%;padding:16px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--offset);font:400 13px/1.4 var(--f-ui);color:var(--text)}.cp-panel *{box-sizing:border-box}.cp-panel b{font-weight:600}.cp-area{position:relative;width:100%;aspect-ratio:288/180;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);cursor:crosshair;touch-action:none}.cp-canvas{display:block}.cp-thumb{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid #FFFFFF;border-radius:50%;box-shadow:0 0 0 1.5px #15131ad9;pointer-events:none;transition:transform .12s}.cp-area:active .cp-thumb,.cp-hue:active .cp-thumb{transform:scale(1.15)}.cp-area:focus-visible,.cp-hue:focus-visible,.cp-btn:focus-visible,.cp-tab:focus-visible,.cp-dot:focus-visible,.cp-hex:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.cp-hint{margin:-4px 0 0;font-size:12px;color:var(--text-2)}.cp-hue{position:relative;width:calc(100% - 18px);height:14px;margin:4px 9px 0;border-radius:7px;cursor:pointer;touch-action:none}.cp-hue .cp-thumb{top:50%}.cp-reads{display:flex;justify-content:space-between;font:400 12px/1.4 var(--f-code);color:var(--text-2)}.cp-reads b{color:var(--text)}.cp-row{display:flex;gap:8px;align-items:flex-end}.cp-hexwrap{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.cp-lab{font-size:12px;font-weight:600;color:var(--text-2)}.cp-hex{width:100%;height:36px;padding:0 10px;border:1px solid var(--field);border-radius:var(--r);background:var(--surface);font:400 14px var(--f-code);color:var(--text);text-transform:uppercase}.cp-btn{height:36px;padding:0 12px;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);font:600 12.5px var(--f-ui);color:var(--text);white-space:nowrap;cursor:pointer;transition:background .15s}.cp-btn:hover{background:var(--sunken)}.cp-tabs{display:flex;gap:2px;padding:3px;border:1px solid var(--rule);border-radius:var(--r)}.cp-tab{flex:1;height:26px;border:0;border-radius:6px;background:none;font:600 12px var(--f-ui);color:var(--text-2);cursor:pointer}.cp-tab[aria-pressed=true]{background:var(--primary);color:var(--on-primary)}.cp-copyrow{display:flex;gap:8px;align-items:center;margin-top:8px}.cp-code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 12.5px var(--f-code);color:var(--text)}.cp-info{display:flex;gap:8px;align-items:stretch}.cp-big{flex:none;width:56px;border:1px solid var(--line);border-radius:var(--r)}.cp-chip{flex:1;display:flex;gap:8px;align-items:center;min-width:0;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r)}.cp-aa:before{content:"Aa"}.cp-aa{flex:none;display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(21,19,26,.12);border-radius:6px;font-size:14px;font-weight:600}.cp-chiptext{font-size:11.5px;line-height:1.3;color:var(--text-2)}.cp-chiptext b{color:var(--text)}.cp-sw{display:flex;flex-wrap:wrap;gap:6px}.cp-dot{width:20px;height:20px;padding:0;border:2px solid var(--surface);border-radius:50%;box-shadow:0 0 0 1px var(--line-strong);cursor:pointer;transition:transform .12s}.cp-dot:hover{transform:scale(1.18)}.cp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(prefers-reduced-motion:reduce){.cp-panel *{transition:none!important}}body.gen{--text:var(--ink);--text-2:var(--ink-2);--text-3:var(--ink-3);--rule:var(--line);--line-strong:var(--line-2);--field:var(--line-2);--primary:var(--btn-ink);--primary-hover:var(--ink-2);--on-primary:var(--btn-ink-t);--accent-hover:var(--p-800);--soft:var(--sunken);--bg:var(--paper);--bad:#B42318;--r:10px;--r-lg:16px;--f-ui:var(--f-d);--f-body:var(--f-b);--f-code:var(--f-m0);--max:1080px;--code-bg:var(--sunken);--code-text:var(--ink)}[data-theme=dark] body.gen{--bad:#FF9A8F;--accent-hover:var(--p-200)}.gen{--q-font:var(--f-ui);--q-radius:var(--r);--q-card-radius:var(--r-lg);--q-pill:var(--r)}.g.gb{--u:var(--accent);--u-hover:var(--accent-hover);--u-on:var(--on-primary);--u-soft:var(--soft);--u-ink:var(--accent);--gb-bar:52px;display:grid;grid-template-columns:minmax(340px,420px) minmax(0,1fr);height:calc(100dvh - var(--gb-bar));min-height:560px;border-top:1px solid var(--rule)}.g code{font:400 12px var(--f-code)}.g button:focus-visible,.g a:focus-visible,.g select:focus-visible,.g [tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}body.gen .foot{display:none}body.gen{overflow:hidden}@media(prefers-reduced-motion:no-preference){.g,.g *{transition:background-color .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease}}.g-link{display:inline-block;margin-top:12px;padding:4px 0;border:0;background:none;font:600 14px var(--f-ui);color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}.g-note{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--text-2)}.g-note a{font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:3px}.g-err{color:var(--bad)}.g-pick-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 10px;font-size:13px;color:var(--text-2)}.g-pick-h b{overflow:hidden;font-weight:600;color:var(--text);text-overflow:ellipsis;white-space:nowrap}.g-tabs,.g-seg{display:inline-flex;flex-wrap:wrap;gap:4px}:is(.g-tabs,.g-seg) button{padding:8px 12px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);font:600 13px var(--f-ui);color:var(--text-2);cursor:pointer}:is(.g-tabs,.g-seg) button:is([aria-pressed=true],[aria-selected=true]){border-color:var(--primary);background:var(--primary);color:var(--on-primary)}.g-name{min-width:0;height:44px;padding:0 14px;border:1px solid var(--field);border-radius:var(--r);background:var(--surface);font:400 15px var(--f-body);color:var(--text)}.g-cc{position:relative;display:flex;align-items:center;gap:10px;min-width:0;padding:8px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface)}.g-cc:focus-within{border-color:var(--accent)}.g-cc-sw{flex:none;width:64px;height:64px;border:0;border-radius:var(--r);box-shadow:inset 0 0 0 1px #15131a14;cursor:pointer}.g-cc-txt{flex:1;min-width:0;display:grid;gap:2px}.g-cc-name{font-size:15px;font-weight:600;color:var(--text-2)}.g-cc input{width:100%;min-width:0;border:0;outline:0;background:none;font:400 22px var(--f-code);letter-spacing:.02em;color:var(--text);text-transform:uppercase}.g-pop{position:absolute;z-index:80;top:calc(100% + 10px);left:0;max-width:calc(100vw - 32px)}.g-canvas{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg)}.g-inspect{display:flex;flex-wrap:wrap;gap:4px 16px;min-height:22px;margin:12px 0 0;font-size:13px;color:var(--text-2)}.g-inspect code{margin-right:6px;color:var(--text)}.g-save,.g-mail{display:grid;gap:10px;margin:0}:is(.g-save,.g-mail) :is(.g-pick-h,.g-note){margin:0}.g-save :is(.btn-primary,.btn-glass,.g-link){justify-self:start}.g-save .btn-primary:disabled{opacity:.7;cursor:wait}.g-q.g-save>:is(.btn-primary,.btn-glass){justify-self:stretch;justify-content:center;height:48px;font-size:15px}.g-toast{position:fixed;left:50%;top:calc(var(--gb-bar) + 12px);z-index:60;margin:0;transform:translate(-50%);pointer-events:none}.g-toast span{display:block;max-width:calc(100vw - 32px);padding:10px 16px;border-radius:var(--r);background:var(--primary);font-size:14px;color:var(--on-primary)}.g-guide{scroll-margin-top:8px}.g-q{display:grid;gap:12px;margin-top:14px;padding:16px;border:1px solid var(--rule);border-radius:var(--q-card-radius);background:var(--surface)}.g-q-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--text-2)}.g-q-end{padding:4px 0;border:0;background:none;font:600 13px var(--q-font);color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}.g-q-bar{height:4px;overflow:hidden;border-radius:4px;background:var(--sunken)}.g-q-bar i{display:block;height:100%;border-radius:4px;background:var(--primary);transition:width .3s ease}.g .g-q-t{margin:2px 0 0;font:600 19px/1.3 var(--f-ui);color:var(--text)}.g-q-help{margin:-4px 0 0;font-size:14px;line-height:1.5;color:var(--text-2)}.g-q-opts{display:grid;gap:8px}.g-q-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--q-radius);background:var(--surface);font:inherit;color:var(--text);text-align:left;cursor:pointer}.g-q-opt:hover{border-color:var(--rule)}.g-q-opt[aria-pressed=true]{border-color:var(--accent);background:var(--soft);box-shadow:inset 0 0 0 1px var(--accent)}.g-q-key{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:5px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-strong);font:600 12px var(--q-font);color:var(--text-2)}.g-q-opt[aria-pressed=true] .g-q-key{background:var(--primary);color:var(--on-primary);box-shadow:none}.g-q-txt{flex:1;min-width:0;display:grid;gap:1px}.g-q-txt b{font-size:15px;font-weight:600}.g-q-txt small{font-size:12.5px;line-height:1.35;color:var(--text-2)}.g-q-dot{flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line)}.g-q-check{flex:none;width:18px;height:18px;border:1.5px solid var(--text-2);border-radius:5px}.g-q-opt[aria-pressed=true] .g-q-check{border-color:var(--primary);background:var(--primary)}.g-q-opt[aria-pressed=true] .g-q-check:after{content:"";display:block;width:5px;height:9px;margin:1px auto 0;border:solid var(--on-primary);border-width:0 2px 2px 0;transform:rotate(45deg)}.g-q-own{cursor:text}.g-q-own:focus-within{border-color:var(--accent)}.g-q-own input{width:100%;min-width:0;padding:2px 0;border:0;outline:0;background:none;font:400 15px var(--f-body);color:var(--text)}.g-q-own input::placeholder{color:var(--text-3)}.g .g-q-more{margin:0;justify-self:start}.g-q-color{display:grid;gap:8px}.g-q-color .g-note{margin:0}.g-q-why{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--q-radius);background:var(--sunken);font-size:13.5px;line-height:1.45;color:var(--text)}.g-q-why>span:first-child,.g-q-why b{font-weight:600;color:var(--text)}.g-q-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--line)}.g-q-nav{display:flex;align-items:center;gap:4px;margin-right:auto;font-size:14px;color:var(--text-2)}.g-q-nav button{width:32px;height:32px;border:0;border-radius:var(--r);background:none;font:600 20px/1 var(--q-font);color:var(--text);cursor:pointer}.g-q-nav button:hover{background:var(--sunken)}.g-q-nav button:disabled{background:none;color:var(--line-strong);cursor:default}.g .g-q-skip{margin:0;color:var(--text-2)}.g-q-sum{margin-top:14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--q-card-radius);background:var(--surface)}.g-q-sum p{margin:0 0 8px;font-size:13px;color:var(--text-2)}.g-q-sum ul,.g-q-all{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}.g-q-sum button{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 10px;border:1px solid var(--line);border-radius:var(--q-pill);background:var(--surface);font:400 13px var(--q-font);color:var(--text-2);cursor:pointer}:is(.g-q-sum,.g-q-all) button:hover{border-color:var(--rule)}:is(.g-q-sum,.g-q-all) b{display:inline-flex;align-items:center;gap:5px;overflow:hidden;font-weight:600;color:var(--text);text-overflow:ellipsis;white-space:nowrap}:is(.g-q-sum,.g-q-all) b i{flex:none;width:12px;height:12px;border-radius:50%}.g-q-all{display:grid;gap:4px}.g-q-all button{display:grid;grid-template-columns:76px minmax(0,1fr);gap:0 10px;width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font:400 13px var(--q-font);color:var(--text-2);text-align:left;cursor:pointer}.g-q-all small{grid-column:2;font-size:12px;color:var(--text-2)}.g-q-all b{white-space:normal}.gb-switch{display:none}.gb-left{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--rule);background:var(--surface)}.gb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}.g .gb-head h1{margin:0;font:600 14.5px/1.3 var(--f-ui);letter-spacing:-.01em;color:var(--text)}.g .gb-head .g-link{margin:0;padding:0;font-size:13px;white-space:nowrap}.gb-files{max-height:190px;overflow:auto;padding:10px 8px;border-bottom:1px solid var(--line)}.gb-label{margin:0 8px 6px}.gb-tree{list-style:none;display:grid;gap:1px;margin:0;padding:0}.gb-tree button{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:0;border-radius:6px;background:none;font:500 13.5px var(--f-ui);color:var(--text);text-align:left;cursor:pointer}.gb-tree button:hover{background:var(--sunken)}.gb-tree button[aria-current]{background:var(--soft);color:var(--accent)}.gb-dir>span{display:block;padding:6px 8px 2px;font:400 12.5px var(--f-code);color:var(--text-2)}.gb-dir ul{list-style:none;display:grid;gap:1px;margin:0;padding:0 0 0 14px}.gb-ico{width:18px;text-align:center;font:400 12px var(--f-code);color:var(--text-2)}.gb-chat{flex:1;min-height:0;display:flex;flex-direction:column}.gb-scroll{position:relative;flex:1;min-height:0;overflow:auto;padding:14px 16px 18px;background:var(--bg)}.gb-log{list-style:none;display:grid;gap:10px;margin:0;padding:0}.gb-msg{max-width:92%;padding:10px 12px;border-radius:10px;font-size:14px;line-height:1.5}.gb-msg p{margin:0}.gb-msg ul{display:grid;gap:2px;margin:6px 0 0;padding-left:18px}.gb-msg.uix{justify-self:start;border:1px solid var(--line);background:var(--surface);color:var(--text)}.gb-msg.you{justify-self:end;background:var(--primary);color:var(--on-primary)}.gb-type{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--rule);background:var(--surface)}.gb-type textarea{flex:1;min-width:0;padding:9px 11px;border:1px solid var(--field);border-radius:var(--r);background:var(--surface);font:400 14.5px/1.45 var(--f-body);color:var(--text);resize:none}.gb-type textarea::placeholder{color:var(--text-3)}.gb-type textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.gb-type .btn-primary{height:40px}.gb-type .btn-primary:disabled{opacity:.55;cursor:default}.gb-right{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}.gb-stage{flex:1;min-height:0;display:flex;flex-direction:column}.gb-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface)}.gb-tabs{display:inline-flex;gap:2px;margin-right:auto;padding:3px;border:1px solid var(--rule);border-radius:var(--r)}.gb-tabs button{padding:6px 12px;border:0;border-radius:6px;background:none;font:600 13px var(--f-ui);color:var(--text-2);cursor:pointer}.gb-tabs button[aria-selected=true]{background:var(--primary);color:var(--on-primary)}.gb-acts{display:flex;align-items:center;gap:8px}.gb-acts .g-note{margin:0}.gb-view{flex:1;min-height:0;overflow:auto;padding:16px}.g .gb-code{min-height:100%;margin:0;padding:16px 18px;overflow:auto;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--code-bg);font:13px/1.6 var(--f-code);color:var(--code-text);white-space:pre}.g .gb-code code{font:inherit;color:inherit}.gb-vars{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:10px 16px;border-top:1px solid var(--rule);background:var(--surface);font:500 12.5px var(--f-ui);color:var(--text-2)}.gb-vars p{display:flex;align-items:baseline;gap:6px;margin:0}.gb-vars b{font-weight:600;color:var(--text)}.g .gb-vars code{font:400 12px var(--f-code);color:var(--text)}.gb-ramp{list-style:none;display:flex;margin:0;padding:0;overflow:hidden;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line)}.gb-ramp li{display:grid;place-items:center;width:26px;height:26px}.gb-ramp span{font:600 8.5px var(--f-ui)}.gs{display:grid;gap:16px;max-width:var(--max);margin:0 auto;padding:56px 24px}.gs .pill{justify-self:start;padding:4px 12px;border-radius:999px;background:var(--sunken);font:600 13px var(--f-ui);color:var(--ink-2)}.gs a:not(.btn-primary){color:var(--accent);text-decoration:underline;text-underline-offset:3px}.gs h1{font-size:clamp(34px,4.6vw,56px)}.gs h2{margin-top:20px;font-size:24px}.gs code{font:400 12px var(--f-code)}.gs-scroll{overflow-x:auto}.gs table{border-collapse:collapse;font-size:13px}.gs :is(td,th){padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.gs-sw{display:inline-block;width:14px;height:14px;margin-right:6px;border-radius:4px;box-shadow:inset 0 0 0 1px #15131a1a;vertical-align:middle}.gs-scales td code{display:block}.gs-near{display:flex;flex-wrap:wrap;gap:10px}.gs-near a{padding:6px 12px;border:1px solid var(--line);border-radius:6px;font-size:14px}@media(max-width:900px){.g.gb{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.gb-switch{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid var(--rule);background:var(--surface)}.gb-switch button{flex:1;height:36px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);font:600 13.5px var(--f-ui);color:var(--text);cursor:pointer}.gb-switch button[aria-pressed=true]{border-color:var(--primary);background:var(--primary);color:var(--on-primary)}.gb-build .gb-right,.gb-see .gb-left{display:none}.gb-left{border-right:0}.gb-files{max-height:112px}.gb-view{padding:10px}.gb-ramp li{width:20px}.gb-ramp span{display:none}.g-toast{top:auto;bottom:96px}}@media(max-width:640px){.g-q{padding:14px}.g .g-q-t{font-size:17px}.g-q-foot :is(.btn-primary,.btn-glass){flex:1}.g-toast span{padding:8px 14px;font-size:12.5px}}@media(prefers-reduced-motion:reduce){.g *{transition:none!important}}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}body.gen main#root{height:calc(100dvh - 52px);min-height:560px;overflow:auto}body.gb-on main#root{overflow:visible}.g-canvas{min-height:calc(100dvh - 240px)}