:root{--bg-page:#0c0c0e;--bg-canvas:#0a0a0c;--surface-panel:#19191d;--surface-raised:#23232b;--surface-active:#33333f;--surface-input:#0c0c0e;--dark-500:#595967;--accent:#6320ee;--accent-hover:#6320eecc;--accent-tint:#6320ee1a;--accent-variant:#d0baff;--ring-focus:#6320ee80;--text-primary:#ffffffe6;--text-emphasis:#fffc;--text-secondary:#ffffffb3;--text-tertiary:#ffffff80;--text-faded:#fff6;--text-muted:#c4bec5;--text-on-light:#0c0c0e;--text-green:#86efac;--highlight:#ffffff0d;--highlight-medium:#ffffff1a;--highlight-strong:#ffffff2e;--green-tint:#22c55e33;--border:#4a4a4a;--border-dropdown:#4a4a4a66;--border-subtle:#4a4a4a4d;--border-light:#ffffff1a;--border-lighter:#ffffff0d;--divider:#ffffff1a;--radius-composer:22px;--radius-panel:16px;--radius-card:16px;--radius-item:12px;--radius-control:8px;--radius-badge:4px;--radius-pill:9999px;--shadow-card:inset 0 1px 0 0 #ffffff0e, inset 0 -8px 12px -8px #0006, 0 12px 28px 0 #00000040;--shadow-bubble:inset 0 1px 0 0 #ffffff0e, inset 0 -8px 12px -8px #0006, 0 1px 2px 0 #0003;--shadow-inner-depth:inset 0 1px 0 0 #ffffff0e, inset 0 -8px 12px -8px #0006;--shadow-segment-active:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--shadow-prompt:0 1px 2px 0 #00000059, 0 4px 10px -6px #000000b3;--font-sans:"SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--canvas-dot:#ffffff0b;--prompt-edge-from:#a52a86;--prompt-edge-to:#5a2f72;--hue-lavender:#cdbcf5;--hue-lavender-pale:#f1ecfc;--hue-violet:#8b6ad1;--hue-plum:#4a1f5e;--hue-berry:#a34d8c;--hue-citron:#dbe64c;--hue-cream:#f3efc8;--topbar-height:48px;--chat-width:472px;--side-width:344px;--rail-width:84px;--gap:12px;--ease-out:cubic-bezier(.2, .7, .2, 1)}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg-page);color:#fff;min-width:1440px;font-family:var(--font-sans);-webkit-font-smoothing:antialiased;margin:0;font-size:14px;line-height:20px}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:0;padding:0}h1,h2,h3,p,ul{margin:0}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.shell{grid-template-rows:var(--topbar-height) minmax(0, 1fr);background:var(--surface-panel);height:100vh;min-height:720px;display:grid}.canvas{box-shadow:inset 0 0 0 1px var(--border-lighter);background-color:var(--bg-canvas);background-image:radial-gradient(var(--canvas-dot) 1px, transparent 1.2px);background-size:22px 22px;border-radius:24px;position:relative;overflow:clip}.canvas__glow{filter:blur(220px);opacity:.8;pointer-events:none;background-image:radial-gradient(circle,#8c3cdc66 0%,#6428be4d 25%,#4619a02e 50%,#0c0c0e00 78%);width:90vw;height:90vw;position:absolute;top:62%;left:50%;transform:translate(-50%)}.panel-box{background:var(--surface-panel);border-radius:var(--radius-panel);box-shadow:var(--shadow-card)}.icon-btn{border-radius:var(--radius-pill);width:32px;height:32px;color:var(--text-secondary);flex:none;place-items:center;transition:background-color .15s ease-out,color .15s ease-out,scale .15s ease-out;display:grid}.icon-btn:hover{background:var(--highlight-medium);color:var(--text-primary)}.icon-btn:active{scale:.92}.icon-btn--active{background:var(--surface-active);color:var(--text-primary);box-shadow:var(--shadow-segment-active)}.icon-btn--sm{width:28px;height:28px}.icon-btn--xs{width:24px;height:24px}.tabs-pill{border-radius:var(--radius-pill);background:var(--surface-raised);gap:2px;height:32px;padding:2px;display:inline-flex}.tabs-pill__item{border-radius:var(--radius-pill);height:28px;color:var(--text-secondary);padding:0 12px;font-size:12px;font-weight:500;line-height:16px}.tabs-pill__item:hover{color:var(--text-primary)}.tabs-pill__item[aria-selected=true]{background:var(--surface-active);color:var(--text-primary);box-shadow:var(--shadow-segment-active)}.btn-primary{border-radius:var(--radius-control);background:var(--accent);color:#fff;height:36px;box-shadow:var(--shadow-bubble);justify-content:center;align-items:center;gap:8px;padding:0 16px;transition:background-color .15s ease-out,scale .15s ease-out;display:inline-flex}.btn-primary:hover{background:var(--accent-hover)}.btn-primary:active{scale:.98}.btn-soft{border-radius:var(--radius-pill);background:var(--highlight-medium);height:31px;color:var(--text-primary);box-shadow:var(--shadow-inner-depth);align-items:center;gap:6px;padding:0 12px;font-size:13px;display:inline-flex}.btn-soft:hover{background:var(--highlight-strong)}.badge{border-radius:var(--radius-pill);white-space:nowrap;align-items:center;gap:4px;padding:2px 8px;font-size:11px;font-weight:500;line-height:14px;display:inline-flex}.badge--green{background:var(--green-tint);color:var(--text-green)}.badge--off{border-radius:var(--radius-badge);background:var(--highlight-medium);color:var(--text-secondary)}.input{border:.5px solid var(--border);border-radius:var(--radius-control);background:var(--surface-input);width:100%;height:37px;color:var(--text-primary);padding:8px 12px}.input::placeholder{color:var(--text-muted)}.input:focus{outline:none}.input:focus-visible{box-shadow:0 0 0 2px var(--ring-focus)}.muted{color:var(--text-tertiary)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.tooltip-anchor{display:inline-flex}.tooltip{z-index:100;border:.5px solid var(--border-dropdown);border-radius:var(--radius-control);background:var(--surface-raised);width:max-content;max-width:240px;box-shadow:var(--shadow-card), 0 8px 24px #0006;pointer-events:none;gap:2px;padding:6px 10px;font-size:12px;line-height:16px;animation:.12s ease-out tooltip-in;display:grid;position:fixed}.tooltip--right{transform:translateY(-50%)}.tooltip--left{transform:translate(-100%,-50%)}.tooltip--below{transform:translate(-50%)}.tooltip--above{transform:translate(-50%,-100%)}.tooltip__title{color:var(--text-primary);font-weight:600}.tooltip__text{color:var(--text-secondary)}@keyframes tooltip-in{0%{opacity:0}}.popover{z-index:90;border:.5px solid var(--border-dropdown);border-radius:var(--radius-item);background:var(--surface-raised);min-width:200px;box-shadow:var(--shadow-card), 0 16px 40px #00000073;animation:popover-in .14s var(--ease-out);padding:4px;position:fixed}.popover--center{translate:-50%}.menu__header{border-bottom:1px solid var(--divider);margin-bottom:4px;padding:8px 10px}.menu__title{color:var(--text-primary);font-size:13px;font-weight:600;line-height:18px}.menu__subtitle{color:var(--text-tertiary);font-size:11px;line-height:16px}.menu__empty{color:var(--text-faded);padding:8px 10px;font-size:12px}.menu__group+.menu__group{border-top:1px solid var(--divider);margin-top:4px;padding-top:4px}.menu__label{color:var(--text-faded);padding:6px 10px 2px;font-size:11px;line-height:16px}.menu__item{border-radius:var(--radius-control);width:100%;height:32px;color:var(--text-secondary);text-align:left;align-items:center;gap:10px;padding:0 10px;font-size:13px;display:flex}.menu__item:hover,.menu__item:focus-visible{background:var(--highlight-medium);color:var(--text-primary);outline:none}.menu__item[aria-checked=true]{color:var(--text-primary)}.menu__check{color:var(--accent-variant);margin-left:auto}.menu__hint{color:var(--text-faded);margin-left:auto;font-size:11px}@keyframes popover-in{0%{opacity:0;transform:translateY(-4px)scale(.98)}}.topbar{z-index:2;background:var(--surface-panel);align-items:center;gap:12px;padding:0 20px;display:flex;position:relative}.topbar__logo{border-radius:var(--radius-control);color:#fff;place-items:center;width:32px;height:32px;margin-right:12px;display:grid}.project{border-radius:var(--radius-control);height:32px;color:var(--text-primary);align-items:center;gap:8px;padding:0 8px 0 6px;font-size:16px;font-weight:600;display:inline-flex}.project:hover{background:var(--highlight)}.project svg{color:var(--text-secondary)}.seg{border-radius:var(--radius-pill);background:var(--bg-canvas);height:32px;box-shadow:var(--shadow-card);gap:2px;margin-left:12px;padding:2px;display:flex;position:relative}.seg__indicator{border-radius:var(--radius-pill);background:var(--surface-active);box-shadow:var(--shadow-segment-active);transition:left .22s var(--ease-out), width .22s var(--ease-out);position:absolute;top:2px;bottom:2px}.seg__item{border-radius:var(--radius-pill);min-width:36px;height:28px;color:var(--text-secondary);justify-content:center;align-items:center;gap:6px;padding:0 10px;font-size:13px;font-weight:500;display:inline-flex;position:relative}.seg__item:hover{color:var(--text-primary)}.seg__item[aria-selected=true]{color:var(--text-primary);padding:0 14px 0 10px}.stages{border-radius:var(--radius-pill);background:var(--bg-canvas);height:34px;box-shadow:var(--shadow-card);transition:padding .26s var(--ease-out);align-items:center;gap:10px;margin-left:12px;padding:0 12px;display:flex}.stages:hover{padding-right:3px}.stages:has(:focus-visible){padding-right:3px}.stages__current{color:var(--text-primary);white-space:nowrap;animation:stage-in .22s var(--ease-out);align-items:center;gap:7px;font-size:13px;font-weight:500;display:inline-flex}.stages__dots{align-items:center;gap:4px;display:flex}.stages__dot{border-radius:var(--radius-pill);width:6px;height:6px;color:var(--text-tertiary);transition:width .26s var(--ease-out), height .26s var(--ease-out), background-color .2s ease-out, color .2s ease-out;transition-delay:calc(var(--i) * 25ms);background:#ffffff38;place-items:center;display:grid;overflow:hidden}.stages__dot[aria-selected=true]{background:var(--text-primary);width:16px}.stages__dot svg{opacity:0;transition:opacity .18s ease-out, scale .22s var(--ease-out);transition-delay:calc(var(--i) * 25ms);flex:none;scale:.5}.stages:hover .stages__dot{background:0 0;width:28px;height:28px}.stages:has(:focus-visible) .stages__dot{background:0 0;width:28px;height:28px}.stages:hover .stages__dot svg{opacity:1;scale:1}.stages:has(:focus-visible) .stages__dot svg{opacity:1;scale:1}.stages:hover .stages__dot[aria-selected=true]{background:var(--surface-active);color:var(--text-primary)}.stages:has(:focus-visible) .stages__dot[aria-selected=true]{background:var(--surface-active);color:var(--text-primary)}.stages .stages__dot:hover{background:var(--highlight-medium);color:var(--text-primary)}.stages__dot:focus-visible{outline-offset:0}@keyframes stage-in{0%{opacity:0;transform:translateY(3px)}}.topbar__end{align-items:center;gap:8px;margin-left:auto;display:flex}.topbar__round{background:var(--highlight)}.topbar__divider{background:var(--divider);width:1px;height:16px;margin:0 4px}.share{border-radius:var(--radius-pill);background:var(--highlight);height:30px;color:var(--text-secondary);align-items:center;gap:8px;padding:0 12px 0 3px;font-weight:500;transition:background-color .15s ease-out,color .15s ease-out;display:inline-flex}.share:hover{background:var(--highlight-medium);color:var(--text-primary)}.share__avatar{background:var(--surface-active);color:#fff;border-radius:50%;place-items:center;width:24px;height:24px;font-size:10px;font-weight:600;display:grid;box-shadow:inset 0 0 0 1px #ffffff1f}.publish{border-radius:var(--radius-pill);background:var(--accent);color:#fff;height:30px;box-shadow:var(--shadow-bubble);align-items:center;gap:8px;padding:0 14px 0 12px;font-weight:500;transition:background-color .15s ease-out,scale .15s ease-out;display:inline-flex}.publish:hover{background:var(--accent-hover)}.publish:active{scale:.98}.layout-toggle--on,.layout-toggle--on:hover{background:var(--text-primary);color:var(--text-on-light)}.seg--static .seg__item{cursor:default}.seg--static .seg__item:hover{color:var(--text-secondary)}.seg__item--current,.seg--static .seg__item--current:hover{background:var(--surface-active);color:var(--text-primary);box-shadow:var(--shadow-segment-active);padding:0 14px 0 10px}.stage-menu{border-radius:var(--radius-pill);background:var(--bg-canvas);height:32px;color:var(--text-primary);box-shadow:var(--shadow-card);align-items:center;gap:8px;margin-left:4px;padding:0 10px 0 12px;font-size:13px;font-weight:500;transition:background-color .15s ease-out;display:inline-flex}.stage-menu:hover,.stage-menu[aria-expanded=true]{background:var(--surface-panel)}.stage-menu__chevron{color:var(--text-tertiary);transition:rotate .2s var(--ease-out)}.stage-menu[aria-expanded=true] .stage-menu__chevron{rotate:180deg}.stage-menu__item{align-items:center;height:auto;min-height:44px;padding:6px 10px}.stage-menu__item>svg:first-child{color:var(--text-secondary);flex:none}.stage-menu__text{min-width:0;display:grid}.stage-menu__name{color:var(--text-primary);font-size:13px;font-weight:500;line-height:18px}.stage-menu__tip{white-space:nowrap;color:var(--text-tertiary);font-size:11px;line-height:16px}.chat{flex-direction:column;height:100%;min-height:0;display:flex}.chat__log{scrollbar-width:thin;scrollbar-color:var(--surface-active) transparent;flex-direction:column;flex:1;gap:12px;min-height:0;padding:16px 16px 24px;display:flex;overflow-y:auto}.chat__spacer{flex:1}.chat__date{color:var(--text-faded);text-align:center;padding-bottom:2px;font-size:11px;line-height:16.5px}.msg{flex-direction:column;gap:3px;display:flex}.msg--user{align-items:flex-end}.bubble{box-shadow:var(--shadow-bubble);padding:8px 14px;font-size:13px;line-height:21.125px}.bubble--user{background:var(--accent);color:#fff;border-radius:16px 16px 4px;max-width:80%}.bubble--assistant{background:var(--surface-raised);color:var(--text-primary);border-radius:16px 16px 16px 4px;gap:6px;padding:10px 16px 12px;display:grid}.bubble--assistant strong{font-weight:600}.bubble--assistant ul{padding-left:18px}.bubble--assistant li::marker{color:var(--text-tertiary)}.msg__link{color:var(--text-primary);text-underline-offset:2px;text-decoration:underline}.msg__link:hover{color:#fff}.msg__time{color:var(--text-faded);padding:0 4px;font-size:11px;line-height:16.5px}.msg__meta{align-items:center;gap:4px;margin-top:2px;display:flex}.msg__meta .icon-btn{color:var(--text-faded)}.meta-btn{border-radius:var(--radius-control);height:24px;color:var(--text-faded);align-items:center;gap:5px;padding:2px 8px 2px 4px;font-size:11px;font-weight:500;display:inline-flex}.meta-btn:hover{background:var(--highlight);color:var(--text-secondary)}.chat__chips{flex-wrap:wrap;gap:6px;padding:0 16px 10px;display:flex}.chip{border-radius:var(--radius-pill);background:var(--surface-raised);max-width:224px;height:30px;color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;padding:0 12px;font-size:12px;transition:background-color .15s ease-out,color .15s ease-out;overflow:hidden}.chip:hover{background:var(--surface-active);color:var(--text-primary)}.composer-row{align-items:center;gap:8px;padding:0 16px 16px;display:flex}.composer__plus.icon-btn{background:var(--surface-raised);width:44px;height:44px;box-shadow:var(--shadow-bubble)}.composer__plus.icon-btn:hover{background:var(--surface-active)}.composer{border-radius:var(--radius-composer);background:var(--surface-raised);min-width:0;height:46px;box-shadow:var(--shadow-prompt);flex:1;align-items:center;gap:8px;padding:0 12px 0 20px;display:flex;position:relative}.composer__edge{border-radius:inherit;background-image:radial-gradient(144px 144px at 0% 0%, var(--prompt-edge-from) 0%, var(--prompt-edge-to) 32%, transparent 72%), radial-gradient(144px 144px at 100% 100%, var(--prompt-edge-from) 0%, var(--prompt-edge-to) 32%, transparent 72%);pointer-events:none;padding:1.5px;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}.composer__input{min-width:0;height:24px;color:var(--text-primary);background:0 0;border:0;flex:1;font-size:16px;line-height:24px}.composer__input::placeholder{color:var(--text-faded)}.composer__input:focus{outline:none}.composer:focus-within{box-shadow:var(--shadow-prompt), 0 0 0 2px var(--ring-focus)}.composer__send{border-radius:var(--radius-pill);background:var(--text-primary);width:44px;height:44px;color:var(--text-on-light);box-shadow:var(--shadow-bubble);border:1px solid #f9f9f914;flex:none;place-items:center;transition:opacity .15s ease-out,scale .15s ease-out;display:grid}.composer__send:hover:not(:disabled){opacity:.9}.composer__send:active:not(:disabled){scale:.94}.composer__send:disabled{opacity:.6;cursor:default}.pc{flex-direction:column;align-items:flex-start;gap:12px;display:flex}.pc--center{text-align:center;align-items:center}.pc__heading{justify-content:space-between;align-self:stretch;align-items:center;margin-top:4px;display:flex}.pc__heading h3{color:var(--text-primary);font-size:16px;font-weight:600;line-height:24px}.pc__text{color:var(--text-muted);font-size:12px;line-height:18px}.pc__meta{color:var(--text-tertiary);font-size:12px;line-height:18px;display:block}.pc__empty{color:var(--text-tertiary);font-size:12px;line-height:18px}.pc__full{align-self:stretch}.table-row{border-radius:var(--radius-control);background:var(--surface-raised);color:var(--text-tertiary);text-align:left;align-self:stretch;align-items:center;gap:8px;padding:10px 10px 10px 12px;transition:background-color .15s ease-out;display:flex}.table-row:hover{background:var(--surface-active);color:var(--text-primary)}.table-row__text{flex:1;gap:2px;min-width:0;display:grid}.table-row__name{color:var(--text-primary);align-items:center;gap:8px;font-size:14px;font-weight:600;display:flex}.table-row__meta{color:var(--text-tertiary);font-size:12px;line-height:18px}.history{gap:2px;padding:0;list-style:none;display:grid}.history__item{border-radius:var(--radius-item);align-items:center;gap:10px;padding:8px;transition:background-color .15s ease-out;display:flex}.history__item:hover{background:var(--highlight)}.history__body{flex:1;gap:2px;min-width:0;display:grid}.history__title{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;line-height:18px;overflow:hidden}.history__time{color:var(--text-tertiary);font-size:11px;line-height:16.5px}.history__restore{border-radius:var(--radius-pill);height:25px;color:var(--text-secondary);padding:0 8px;font-size:11px;font-weight:600}.history__restore:hover{background:var(--highlight);color:var(--text-primary)}.tabs-box{border:1px solid var(--border-light);background:var(--highlight);border-radius:12px;gap:2px;height:36px;padding:3px;display:flex}.tabs-box__item{border-radius:var(--radius-control);height:28px;color:var(--text-primary);padding:0 8px;font-size:12px;font-weight:500}.tabs-box__item[aria-selected=true]{background:var(--highlight-medium)}.tabs-box__item:disabled{color:var(--text-faded);opacity:.6;cursor:default}.empty-card{border:1px solid var(--border-lighter);border-radius:var(--radius-card);background:var(--highlight);text-align:center;flex-direction:column;align-self:stretch;align-items:center;gap:8px;padding:24px 20px;display:flex}.empty-card .btn-primary{margin-top:6px}.empty-card__title{color:var(--text-primary);margin-top:4px;font-size:14px;font-weight:600}.empty-card__text{color:var(--text-muted);font-size:12px;line-height:18px}.icon-tile{background:var(--accent-tint);width:44px;height:44px;color:var(--accent-variant);border-radius:12px;place-items:center;display:grid}.brand-id{align-items:center;gap:12px;display:flex}.brand-id__icon{background:var(--hue-lavender);border-radius:11px;width:44px;height:44px;position:relative;overflow:hidden}.brand-id__icon span{border:1.5px solid var(--hue-lavender-pale);transform-origin:50% 100%;border-radius:3px;width:11px;height:40px;margin-left:-5.5px;position:absolute;bottom:-10px;left:50%}.brand-id__icon span:first-child{background:var(--hue-plum);transform:rotate(-28deg)}.brand-id__icon span:nth-child(2){background:var(--hue-citron)}.brand-id__icon span:nth-child(3){background:var(--hue-berry);transform:rotate(28deg)}.brand-id__name{color:var(--text-primary);font-size:14px;font-weight:600;display:block}.brand-colors{grid-template-columns:repeat(4,1fr);align-self:stretch;gap:8px;display:grid}.brand-color{color:var(--text-secondary);gap:6px;font-size:11px;display:grid}.brand-color__chip{border-radius:var(--radius-control);height:36px;box-shadow:inset 0 0 0 1px var(--border-light)}.file-list{gap:2px;padding:0;list-style:none;display:grid}.file-row{border-radius:var(--radius-control);width:100%;height:36px;color:var(--text-tertiary);text-align:left;align-items:center;gap:10px;padding:0 8px;display:flex}.file-row:hover{background:var(--highlight)}.file-row__name{color:var(--text-primary);font-family:var(--font-mono);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.file-row__meta{color:var(--text-tertiary);flex:none;margin-left:auto;font-size:11px}.figma-row{align-self:stretch;position:relative}.figma-row__icon{color:var(--text-tertiary);display:grid;position:absolute;top:50%;left:12px;translate:0 -50%}.figma-row__input{padding-left:36px}.store-row{border-radius:var(--radius-control);background:var(--surface-raised);align-self:stretch;align-items:center;gap:10px;padding:10px 12px;display:flex}.store-row__icon{border-radius:var(--radius-control);background:var(--highlight-medium);width:28px;height:28px;color:var(--text-primary);place-items:center;display:grid}.store-row__name{color:var(--text-primary);flex:1;font-size:13px;font-weight:500}.qr-frame{border-radius:var(--radius-item);width:156px;color:var(--text-on-light);background:#fff;padding:12px;display:block}.qr{width:100%;display:block}.preview{z-index:1;flex-direction:column;justify-content:center;align-items:center;gap:40px;min-width:0;height:100%;min-height:0;display:flex;position:relative}.preview__device{flex:none}.phone{filter:drop-shadow(0 20px 44px #000000bf);width:320px;height:660px;position:relative}.phone__body{background:linear-gradient(90deg,#9b9ba4 0%,#44444b 22%,#7a7a84 50%,#44444b 78%,#9b9ba4 100%);border-radius:54px;height:100%;padding:1.5px}.phone__screen{background:var(--hue-lavender-pale);height:100%;color:var(--hue-plum);border:9px solid #08080a;border-radius:52.5px;flex-direction:column;display:flex;position:relative;overflow:hidden}.phone__btn{background:linear-gradient(90deg,#33333a 0%,#90909a 30%,#5c5c64 50%,#90909a 70%,#33333a 100%);border-radius:2px;width:3px;position:absolute}.phone__btn--action{height:30px;top:120px;left:-2px}.phone__btn--up{height:54px;top:172px;left:-2px}.phone__btn--down{height:54px;top:238px;left:-2px}.phone__btn--power{height:84px;top:196px;right:-2px}.phone__status{color:#000;flex:none;justify-content:space-between;align-items:center;height:50px;padding:2px 22px 0 34px;display:flex;position:relative}.phone__clock{letter-spacing:-.2px;font-size:15px;font-weight:600}.phone__island{background:#000;border-radius:20px;justify-content:flex-end;align-items:center;gap:18px;width:92px;height:27px;padding-right:9px;display:flex;position:absolute;top:10px;left:50%;translate:-50%}.phone__led{background:#22c55e;border-radius:50%;width:4px;height:4px}.phone__camera{background:radial-gradient(circle at 35% 35%,#2a2a44,#0b0b12 70%);border-radius:50%;width:9px;height:9px}.phone__home{background:var(--hue-plum);border-radius:4px;width:104px;height:4px;position:absolute;bottom:8px;left:50%;translate:-50%}.hue{min-height:0;font-family:var(--font-sans);flex-direction:column;flex:1;padding:10px 18px 30px;display:flex}.hue__brand{font-size:12px;font-weight:600;line-height:16px}.hue__title{letter-spacing:-.6px;margin-top:4px;font-size:28px;font-weight:700;line-height:30px}.hue__fan{background:var(--hue-lavender);border-radius:18px;flex:1;min-height:0;margin-top:16px;position:relative;overflow:hidden}.hue__swatch{border:3px solid var(--hue-lavender-pale);width:66px;height:270px;transform:rotate(var(--turn));transform-origin:50% 100%;border-radius:14px;margin-left:-33px;position:absolute;bottom:-70px;left:50%}.hue__swatch--violet{background:var(--hue-violet)}.hue__swatch--plum{background:var(--hue-plum)}.hue__swatch--citron{background:var(--hue-citron)}.hue__swatch--berry{background:var(--hue-berry)}.hue__swatch--cream{background:var(--hue-cream)}.hue__cta{background:var(--hue-plum);color:#fff;cursor:default;border-radius:999px;flex:none;height:46px;margin-top:16px;font-size:15px;font-weight:600}.hue__note{color:#7a5a8c;text-align:center;margin-top:10px;font-size:11px;line-height:16px}.hue__tiles{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;display:grid}.hue__tile{border-radius:8px;place-items:center;height:36px;font-size:12px;font-weight:600;display:grid}.hue__tile--lavender{background:var(--hue-lavender)}.hue__tile--plum{background:var(--hue-plum);color:#fff}.hue__tile--citron{background:var(--hue-citron)}.preview__toolbar{gap:8px;display:flex}.tool-group{border-radius:var(--radius-pill);background:var(--surface-panel);box-shadow:var(--shadow-card);gap:2px;padding:4px;display:flex}.qr-pop{width:248px;padding:12px}