.features__title,.scale__title{margin:0 0 24px;font-size:15px;font-weight:600}.features__grid{flex-wrap:wrap;gap:6px 4px;display:flex}.scale{--knob:24px;--dot:9px;--knob-x:calc(var(--knob) / 2 + var(--fraction) * (100% - var(--knob)));--shift-gain:1.7;--shift:clamp(0, calc((var(--fraction) - .5) * var(--shift-gain) + .5), 1);--tail-inset:16px;border-top:1px solid var(--line);padding-top:20px;transition:--fraction .18s ease-out}.scale--mood{--tone:var(--mood)}.scale--style{--tone:var(--style)}.scale__bubble-track{filter:drop-shadow(0 4px 16px #1d1d1f14);height:40px;position:relative}.scale__bubble{top:0;left:var(--knob-x);transform:translateX(clamp(calc(-100% + var(--tail-inset)), calc(var(--shift) * -100%), calc(-1 * var(--tail-inset))));border:1px solid var(--hairline);height:27px;color:var(--tone);white-space:nowrap;background:#fff;border-radius:6px;align-items:center;gap:4px;padding:4px 12px;font-size:16px;line-height:1.2;transition:left .18s ease-out,opacity .18s ease-out;display:flex;position:absolute}.scale__tail{top:21px;left:var(--knob-x);border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:#fff;width:10px;height:10px;transition:left .18s ease-out,opacity .18s ease-out;position:absolute;transform:translate(-50%)rotate(45deg)}.scale__bubble--unset,.scale__bubble--unset+.scale__tail{opacity:.55}.scale__rail{align-items:center;height:24px;display:flex;position:relative}.scale__rail:before{content:"";left:calc(var(--knob) / 2);right:calc(var(--knob) / 2);background:#ebebed;border-radius:999px;height:6px;position:absolute}.scale__fill{left:calc(var(--knob) / 2);width:calc(var(--knob-x) - var(--knob) / 2);background:linear-gradient(90deg, rgb(from var(--tone) r g b / 0) 0%, var(--tone) 100%);border-radius:999px;height:6px;position:absolute}.scale__ticks{inset:0 calc(var(--knob) / 2 - var(--dot) / 2);justify-content:space-between;align-items:center;display:flex;position:absolute}.scale__tick{width:var(--dot);height:var(--dot);background:var(--tone);border-radius:50%}.scale__rail input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;margin:0;position:absolute;inset:0}.scale__rail input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;background:var(--tone);border:6px solid var(--card);width:24px;height:24px;box-shadow:0 0 0 1px var(--hairline), 0 2px 8px 0 #1d1d1f2e;border-radius:50%}.scale__rail input[type=range]::-moz-range-thumb{box-sizing:border-box;background:var(--tone);border:6px solid var(--card);width:24px;height:24px;box-shadow:0 0 0 1px var(--hairline), 0 2px 8px 0 #1d1d1f2e;border-radius:50%}.scale__rail input[type=range]:focus-visible{outline:2px solid var(--tone);outline-offset:6px;border-radius:12px}.scale__ends{color:var(--ink);justify-content:space-between;margin-top:8px;font-size:14px;line-height:20px;display:flex}.scale__ends span{max-width:8ch}.scale__ends span:last-child{text-align:right}.sentence{border-bottom:1px solid var(--line);padding:18px 22px 20px;transition:background-color .25s}.sentence--nudged{background:#fff4fa}.sentence__line{flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 6px;font-size:15px;line-height:1.6;display:flex}.sentence__line:last-of-type{margin-bottom:0}.ghost-button{border:1px solid var(--line);background:var(--card);font:inherit;cursor:pointer;border-radius:999px;align-items:center;gap:8px;margin-top:16px;padding:9px 15px;font-size:14px;transition:transform .14s,border-color .15s,opacity .18s;display:inline-flex}.ghost-button--idle{opacity:0;visibility:hidden;pointer-events:none}.ghost-button:hover{border-color:var(--ink);transform:translateY(-1px)}.ghost-button:active{transform:scale(.97)}.sentence .pill{border:1px solid var(--hairline);padding:0 18px;font-size:17px;line-height:1.25}.sentence .pill--feature{border-radius:999px}.sentence .pill--mood,.sentence .pill--style{border-radius:12px}.sentence .pill>span[aria-hidden=true]{color:var(--ink);font-size:15px}.panel{background:var(--card);border:1px solid var(--edge);border-radius:var(--radius);height:100%;min-height:0;box-shadow:none;scroll-behavior:smooth;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--hairline) transparent;flex-direction:column;display:flex;overflow-y:auto}.panel::-webkit-scrollbar{width:14px}.panel::-webkit-scrollbar-track{margin:var(--radius) 0;background:0 0}.panel::-webkit-scrollbar-thumb{background:var(--hairline);background-clip:padding-box;border:4px solid #0000;border-radius:999px}.panel::-webkit-scrollbar-thumb:hover{background:#1d1d1f47 padding-box padding-box}.panel__body{flex-direction:column;gap:24px;padding:20px 22px 96px;display:flex}.composition{justify-items:center;gap:22px;display:grid}.composition__emblem{width:320px}.composition__mark{max-width:min(460px,100%);max-height:46vh}.canvas__save{z-index:1;color:var(--ink);align-items:center;gap:10px;font-size:15px;font-weight:500;display:flex;position:absolute;top:16px;right:18px}.canvas__save-error{color:#b3261e;text-align:right;max-width:30ch;font-size:13px}.sparkles{width:clamp(280px,30%,560px);position:absolute;top:50%;left:50%;overflow:visible;translate:-50% -50%}.spark{transform-box:fill-box;transform-origin:50%}@keyframes drift-big{0%,to{opacity:.75;transform:translate(0)scale(1)rotate(0)}50%{opacity:1;transform:translate(-5px,-7px)scale(1.07)rotate(-4deg)}}@keyframes drift-mid{0%,to{opacity:1;transform:translate(0)scale(1)}50%{opacity:.7;transform:translate(6px,5px)scale(.92)}}@keyframes drift-small{0%,to{opacity:.65;transform:translate(0)scale(.9)}50%{opacity:1;transform:translate(-4px,6px)scale(1.12)}}.thumbs{justify-content:center;gap:12px;padding-top:18px;display:flex}.thumb{border:1px solid var(--line);background:var(--card);cursor:pointer;border-radius:12px;justify-items:center;gap:4px;width:96px;padding:12px 10px;display:grid}.thumb--current{border-color:var(--ink)}.thumb__emblem{width:52px}.thumb__mark{object-fit:contain;width:60px;height:38px}.canvas{border:1px solid var(--edge);border-radius:var(--radius);background:var(--card);box-shadow:none;flex-direction:column;min-height:0;padding:18px;display:flex;position:relative}.canvas--loading{border-color:#0000}.canvas--loading:before{content:"";border-radius:calc(var(--radius) + 3px);pointer-events:none;background:linear-gradient(62.45deg,#c140a4 0%,#fff 25%,#d25211 50%,#fff 75%,#899400 100%) 0 0/280% 280%;padding:4px;animation:2.6s ease-in-out infinite alternate sheen;position:absolute;inset:-3px;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.canvas__stage{flex:1;place-items:center;min-height:0;display:grid}.canvas__placeholder{justify-items:center;gap:34px;width:100%;display:grid;position:relative}.canvas__hint{place-items:center;width:100%;min-height:300px;display:grid;position:relative}.canvas__emblem{width:clamp(240px,32%,620px)}.canvas__prompt{z-index:1;text-align:center;color:var(--ink);margin:0;font-size:17px;line-height:1.5;position:relative}.canvas--loading .spark--big{animation:3.2s ease-in-out infinite drift-big}.canvas--loading .spark--mid{animation:2.5s ease-in-out infinite drift-mid}.canvas--loading .spark--small{animation:2.1s ease-in-out infinite drift-small}.canvas__error{text-align:center;color:#b3261e;max-width:34ch}.actions{z-index:1;background:var(--ink);border-radius:999px;align-items:center;gap:6px;padding:6px;display:flex;position:absolute;bottom:8px;left:8px;right:8px}.actions button{font:inherit;cursor:pointer;background-position:0%;background-size:200% 100%;border:0;border-radius:999px;flex:1;justify-content:center;align-items:center;gap:8px;padding:11px 16px;font-size:15px;transition:transform .14s,background-position .5s,background-color .2s,color .2s;display:inline-flex}.actions button:active:not(:disabled){transform:scale(.97)}.actions__random{color:#fff;background-color:#0000;background-image:none;position:relative}.actions__random:before{content:"";border-radius:inherit;pointer-events:none;opacity:0;background-image:linear-gradient(62.45deg,#c140a4 0%,#d25211 25%,#899400 50%,#d25211 75%,#c140a4 100%);background-position:0%;background-size:200% 100%;padding:1px;transition:background-position .5s,opacity .18s;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.actions__random:hover:not(:disabled):before,.actions__random:active:not(:disabled):before{opacity:1;background-position:100%}.actions__random .icon{color:#fff;opacity:1}.actions__generate{color:#fff;background-image:linear-gradient(90deg,#c140a4d9 0%,#d25211 25%,#899400d9 50%,#d25211 75%,#c140a4d9 100%);background-position:0%;background-size:200% 100%}.actions__generate:hover:not(:disabled){background-position:100%}.actions__generate:disabled:not(.actions__generate--idle){animation:1.3s ease-in-out infinite alternate sheen}.actions__generate--idle{color:#a5a5ad;background-color:#3a3a3f;background-image:none}.actions__generate--idle .icon{opacity:.6}.actions button:disabled{cursor:progress}.actions__generate--idle:disabled{opacity:.7}.header{background:var(--card);border:1px solid var(--edge);border-radius:var(--radius);box-shadow:none;justify-content:space-between;align-items:center;padding:14px 20px;display:flex}.header__title{font-size:17px;font-weight:600}.layout{flex:1;grid-template-columns:420px minmax(0,1fr);align-items:stretch;gap:12px;min-height:0;display:grid}.layout__left{min-height:0;position:relative}@font-face{font-family:Roboto;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/roboto-latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Roboto;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/roboto-latin-ext.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@property --fraction{syntax:"<number>";inherits:true;initial-value:.5}:root{--ink:#1f1f22;--muted:#8a8a92;--line:#e6e6ea;--edge:#1d1d1f;--card:#fff;--page:#f6f6f8;--feature:#c140a4;--mood:#899400;--style:#d4622a;--radius:18px;--chip-shadow:0 4px 16px 0 #1d1d1f14;--hairline:#1d1d1f26;color:var(--ink);font-family:Roboto,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html{height:100%;overflow:hidden}body{background:var(--page);height:100%;margin:0;padding:12px;overflow:hidden}#root{flex-direction:column;gap:12px;height:100%;min-height:0;display:flex}.sr-only{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}@keyframes sheen{0%{background-position:0%}to{background-position:100%}}:where(button,a,input):focus-visible{outline:2px solid var(--edge);outline-offset:3px}@media (prefers-reduced-motion:reduce){.panel{scroll-behavior:auto}.canvas--loading:before,.canvas--loading .spark,.actions__generate:disabled{animation:none}.icon,.chip,.pill,.ghost-button,.actions button{transition:none}.chip:hover:not(:disabled),button.pill:hover:not(:disabled),.ghost-button:hover,.chip:active,.pill:active,.actions button:active{transform:none}}.icon{flex:none;transition:transform .3s,opacity .15s;display:block}.icon--plus{color:var(--ink)}.pill{border:1px solid var(--line);background:var(--card);height:40px;box-shadow:var(--chip-shadow);font:inherit;cursor:pointer;white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:0 13px;font-size:14px;transition:translate .14s,scale .14s,box-shadow .18s,border-color .15s;display:inline-flex}button.pill:hover:not(:disabled){border-color:currentColor;translate:0 -1px;box-shadow:0 6px 18px #1d1d1f1f}button.pill:active:not(:disabled){box-shadow:var(--chip-shadow);scale:.96}.pill--empty{cursor:default;opacity:.75}.pill--feature{color:var(--feature)}.pill--mood{color:var(--mood)}.pill--style{color:var(--style)}.pill--add:hover:not(:disabled){border-color:currentColor}.pill:disabled{opacity:.4;cursor:not-allowed}.chip{border:1.5px solid var(--edge);background:var(--card);box-shadow:var(--chip-shadow);color:var(--ink);font:inherit;cursor:pointer;border-radius:999px;align-items:center;gap:9px;padding:8px 18px;font-size:15px;text-decoration:none;transition:transform .14s,box-shadow .18s,opacity .15s;display:inline-flex}.chip:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 22px #1d1d1f24}.chip:hover:not(:disabled) .icon{transform:translateY(2px)}.chip:active:not(:disabled){box-shadow:var(--chip-shadow);transform:scale(.97)}.chip--outline{border-width:1px;font-size:14px}.chip:disabled{border-color:var(--line);color:var(--muted);box-shadow:none;cursor:not-allowed}
