:root{font-family:Inter,system-ui,sans-serif;--g-page:#f4f6f8;--g-surface:#fff;--g-soft:#f8fafb;--g-text:#111827;--g-muted:#667085;--g-line:#dfe4e8;--g-line-strong:#c8d0d9;--g-accent:#111827;--g-shadow:0 24px 70px rgba(16,24,40,.1)}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:linear-gradient(180deg,#fff,var(--g-page));color:var(--g-text)}button,input,select{font:inherit}.gradient-shell{width:min(1320px,100%);margin:auto;padding:clamp(28px,5vw,58px) 16px calc(56px + env(safe-area-inset-bottom))}.gradient-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-bottom:24px}.gradient-hero>div{max-width:880px}.eyebrow{margin:0;color:var(--g-muted);font-size:.68rem;font-weight:800;letter-spacing:.14em}.gradient-hero h1{max-width:900px;margin:7px 0 12px;font-size:clamp(2.4rem,6vw,5.6rem);line-height:.94;letter-spacing:-.06em}.gradient-hero p:not(.eyebrow){max-width:760px;margin:0;color:#475467;font-size:clamp(.96rem,1.4vw,1.08rem);line-height:1.65}.gradient-guide-link{min-width:250px;display:grid;grid-template-columns:1fr auto;gap:3px 16px;align-items:center;padding:15px 17px;border:1px solid var(--g-line);border-radius:16px;background:rgba(255,255,255,.8);color:var(--g-text);text-decoration:none;box-shadow:0 12px 34px rgba(16,24,40,.07)}.gradient-guide-link span{font-weight:800}.gradient-guide-link small{color:var(--g-muted);font-size:.72rem}.gradient-guide-link b{grid-column:2;grid-row:1/3;font-size:1.25rem}.gradient-workspace{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(390px,.75fr);gap:18px}.gradient-canvas-panel,.gradient-editor,.handoff-card,.saved-section{border:1px solid var(--g-line);border-radius:24px;background:var(--g-surface);box-shadow:var(--g-shadow)}.gradient-canvas-panel{min-width:0;padding:16px}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.panel-heading h2,.panel-heading h3{margin:4px 0 0;font-size:1rem;letter-spacing:-.02em}.panel-heading p:not(.eyebrow){margin:5px 0 0;color:var(--g-muted);font-size:.77rem;line-height:1.5}.canvas-heading{padding:4px 4px 14px}.preview-modes{display:flex;gap:5px;padding:4px;border:1px solid var(--g-line);border-radius:12px;background:var(--g-soft)}.preview-modes button{min-height:36px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#475467;font-size:.72rem;font-weight:750;cursor:pointer}.preview-modes button.active{background:#111827;color:#fff}.gradient-preview{position:relative;min-height:620px;overflow:hidden;border-radius:19px;background:#6D5DFC}.preview-scene{position:absolute;inset:0;display:none}.gradient-preview[data-preview-mode="canvas"] .canvas-scene,.gradient-preview[data-preview-mode="interface"] .interface-scene,.gradient-preview[data-preview-mode="type"] .type-scene{display:flex}.canvas-scene{align-items:flex-end;justify-content:space-between;padding:34px;color:var(--preview-ink,#fff)}.canvas-scene strong{font-size:clamp(2.8rem,8vw,7rem);line-height:.82;letter-spacing:-.08em}.canvas-scene small{font:700 .72rem 'Space Mono',monospace;letter-spacing:.12em}.canvas-orbit{position:absolute;border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:999px}.canvas-orbit.one{width:430px;height:430px;right:-110px;top:-120px}.canvas-orbit.two{width:260px;height:260px;right:90px;top:80px}.interface-scene{align-items:center;justify-content:center;padding:34px}.interface-window{width:min(560px,94%);overflow:hidden;border:1px solid rgba(255,255,255,.5);border-radius:22px;background:rgba(255,255,255,.88);box-shadow:0 28px 80px rgba(0,0,0,.22);backdrop-filter:blur(18px)}.interface-bar{display:flex;gap:6px;padding:13px;border-bottom:1px solid rgba(17,24,39,.1)}.interface-bar i{width:9px;height:9px;border-radius:50%;background:#cfd6dd}.interface-content{padding:36px;color:#111827}.interface-content>span{font-size:.64rem;font-weight:800;letter-spacing:.14em}.interface-content h3{max-width:440px;margin:10px 0;font-size:clamp(2rem,5vw,4rem);line-height:.96;letter-spacing:-.055em}.interface-content p{max-width:430px;color:#475467;line-height:1.6}.interface-content button{min-height:44px;margin-top:8px;padding:0 17px;border:0;border-radius:11px;background:#111827;color:#fff;font-weight:800}.type-scene{flex-direction:column;justify-content:flex-end;padding:clamp(28px,6vw,72px);color:var(--preview-ink,#fff)}.type-scene .type-kicker{margin:0;font-size:.7rem;font-weight:800;letter-spacing:.15em}.type-scene h3{max-width:820px;margin:12px 0 14px;font-size:clamp(3rem,8vw,7.8rem);line-height:.86;letter-spacing:-.07em}.type-scene>p:last-child{max-width:620px;margin:0;font-size:clamp(.96rem,1.6vw,1.16rem);line-height:1.6}.canvas-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.primary-button,.secondary-button,.icon-button,.text-button{min-height:42px;border-radius:11px;font-weight:750;cursor:pointer}.primary-button{padding:0 15px;border:1px solid #111827;background:#111827;color:#fff}.secondary-button{padding:0 14px;border:1px solid var(--g-line);background:#fff;color:#111827}.icon-button{width:42px;border:1px solid var(--g-line);background:#fff;color:#111827;font-size:1.1rem}.icon-button:disabled{opacity:.38;cursor:not-allowed}.text-button{padding:0;border:0;background:transparent;color:#475467}.readability-panel{margin-top:14px;padding:16px;border:1px solid var(--g-line);border-radius:17px;background:var(--g-soft)}.readability-heading{display:flex;justify-content:space-between;gap:16px}.readability-heading h3{margin:4px 0 0;font-size:.95rem}.readability-heading>strong{align-self:center;color:#344054;font-size:.75rem}.readability-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}.readability-stats article{padding:12px;border:1px solid var(--g-line);border-radius:13px;background:#fff}.readability-stats span,.readability-stats strong,.readability-stats small{display:block}.readability-stats span{color:var(--g-muted);font-size:.66rem;font-weight:750}.readability-stats strong{margin-top:3px;font-size:1.25rem}.readability-stats small{margin-top:2px;color:var(--g-muted);font-size:.65rem}.readability-samples{display:grid;grid-template-columns:repeat(11,1fr);gap:4px;margin-top:10px}.readability-samples span{height:32px;border:1px solid rgba(0,0,0,.08);border-radius:7px}.readability-panel>p{margin:10px 0 0;color:var(--g-muted);font-size:.68rem;line-height:1.5}.gradient-editor{min-width:0;padding:20px}.editor-section+.editor-section{margin-top:24px;padding-top:22px;border-top:1px solid var(--g-line)}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.control-grid label,.field-label label{display:grid;gap:6px;color:#475467;font-size:.72rem;font-weight:750}.control-grid select{width:100%;min-height:43px;padding:0 11px;border:1px solid var(--g-line);border-radius:11px;background:#fff;color:#111827}.angle-field{margin-top:13px}.field-label{display:flex;justify-content:space-between;align-items:center}.field-label output{font:700 .72rem 'Space Mono',monospace}.angle-field>input{width:100%;margin:10px 0}.angle-presets{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.angle-presets button{height:32px;border:1px solid var(--g-line);border-radius:8px;background:#fff;color:#475467;cursor:pointer}.angle-presets button.active{background:#111827;color:#fff;border-color:#111827}.stop-track{position:relative;height:72px;margin-top:15px;border:1px solid var(--g-line-strong);border-radius:15px;background:#6D5DFC;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}.stop-markers{position:absolute;inset:0 11px}.stop-marker{position:absolute;bottom:-8px;width:25px;height:32px;transform:translateX(-50%);border:3px solid #fff;border-radius:9px 9px 12px 12px;background:var(--marker);box-shadow:0 4px 12px rgba(0,0,0,.22);cursor:ew-resize}.stop-marker::after{content:'';position:absolute;left:50%;top:-7px;width:8px;height:8px;transform:translateX(-50%) rotate(45deg);border-left:2px solid #fff;border-top:2px solid #fff;background:var(--marker)}.stop-marker:focus-visible{outline:3px solid #111827;outline-offset:3px}.stops-list{display:grid;gap:9px;margin-top:18px}.stop-row{display:grid;grid-template-columns:42px 42px minmax(100px,1fr) minmax(90px,1.2fr) 60px 34px 34px;gap:7px;align-items:center;padding:9px;border:1px solid var(--g-line);border-radius:13px;background:#fff}.stop-index{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--stop-color);color:var(--stop-ink);font-size:.68rem;font-weight:800}.stop-row input[type=color]{position:absolute;width:1px;height:1px;opacity:0}.stop-color-button{height:38px;border:1px solid var(--g-line);border-radius:9px;background:var(--stop-color);cursor:pointer}.stop-row input[type=text],.stop-row input[type=number]{min-width:0;height:38px;padding:0 9px;border:1px solid var(--g-line);border-radius:9px;background:#fff;color:#111827;font:700 .68rem 'Space Mono',monospace}.stop-row input[type=range]{min-width:0}.stop-row .stop-action{height:34px;border:1px solid var(--g-line);border-radius:9px;background:#fff;color:#475467;cursor:pointer}.interpolation-compare{display:grid;gap:8px;margin-top:14px}.interpolation-card{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;width:100%;padding:9px;border:1px solid var(--g-line);border-radius:12px;background:#fff;text-align:left;cursor:pointer}.interpolation-card.active{border-color:#111827;box-shadow:0 0 0 2px rgba(17,24,39,.08)}.interpolation-card strong{font-size:.72rem}.interpolation-strip{height:36px;border-radius:9px}.space-description{margin:10px 0 0;color:var(--g-muted);font-size:.72rem;line-height:1.55}.handoff-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:18px;margin-top:18px}.handoff-card{padding:20px}.code-section pre{max-height:260px;overflow:auto;margin:14px 0 0;padding:15px;border-radius:14px;background:#111827;color:#f8fafc;font:500 .76rem/1.6 'Space Mono',monospace;white-space:pre-wrap}.export-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.export-actions button{width:100%}.status{min-height:21px;margin:12px 0 0;color:var(--g-muted);font-size:.78rem}.saved-section{margin-top:18px;padding:20px}.saved-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}.saved-card{position:relative;overflow:hidden;border:1px solid var(--g-line);border-radius:14px;background:#fff}.saved-open{width:100%;padding:0;border:0;background:#fff;text-align:left;cursor:pointer}.saved-swatch{height:96px}.saved-meta{display:grid;gap:3px;padding:10px}.saved-meta strong{font-size:.72rem}.saved-meta code{color:var(--g-muted);font-size:.61rem}.saved-delete{position:absolute;right:7px;top:7px;width:30px;height:30px;border:1px solid rgba(255,255,255,.7);border-radius:9px;background:rgba(255,255,255,.86);color:#111827;cursor:pointer}.empty{color:var(--g-muted);font-size:.84rem}html[data-hc-theme="dark"]{--g-page:#0d1015;--g-surface:#171c23;--g-soft:#11161c;--g-text:#f4f6f8;--g-muted:#b3bbc6;--g-line:#303844;--g-line-strong:#46505e;--g-accent:#f4f6f8;--g-shadow:0 24px 70px rgba(0,0,0,.35)}html[data-hc-theme="dark"] body{background:linear-gradient(180deg,#151a21,var(--g-page));color:var(--g-text)}html[data-hc-theme="dark"] .gradient-hero p:not(.eyebrow){color:var(--g-muted)}html[data-hc-theme="dark"] :is(.gradient-guide-link,.gradient-canvas-panel,.gradient-editor,.handoff-card,.saved-section,.readability-stats article,.stop-row,.interpolation-card,.saved-card,.saved-open){background:var(--g-surface);border-color:var(--g-line);color:var(--g-text)}html[data-hc-theme="dark"] :is(.secondary-button,.icon-button,.angle-presets button,.stop-row input,.stop-row .stop-action,.control-grid select){background:var(--g-surface);border-color:var(--g-line);color:var(--g-text)}html[data-hc-theme="dark"] :is(.readability-panel){background:var(--g-soft)}html[data-hc-theme="dark"] :is(.panel-heading p:not(.eyebrow),.readability-panel>p,.space-description,.status,.saved-meta code,.gradient-guide-link small){color:var(--g-muted)}html[data-hc-theme="dark"] :is(.control-grid label,.field-label label,.readability-heading>strong,.text-button){color:var(--g-muted)}html[data-hc-theme="dark"] .interpolation-card.active{border-color:#f4f6f8;box-shadow:0 0 0 2px rgba(244,246,248,.12)}html[data-hc-theme="dark"] .preview-modes{background:var(--g-soft);border-color:var(--g-line)}html[data-hc-theme="dark"] .preview-modes button{color:var(--g-muted)}html[data-hc-theme="dark"] .preview-modes button.active,html[data-hc-theme="dark"] .angle-presets button.active{background:#f4f6f8;color:#111827;border-color:#f4f6f8}html[data-hc-theme="dark"] .primary-button{background:#f4f6f8;color:#111827;border-color:#f4f6f8}@media(max-width:1020px){.gradient-workspace,.handoff-grid{grid-template-columns:1fr}.gradient-preview{min-height:540px}.saved-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.gradient-shell{padding-top:26px}.gradient-hero{grid-template-columns:1fr}.gradient-guide-link{min-width:0}.gradient-preview{min-height:480px}.canvas-heading,.panel-heading{align-items:flex-start;flex-direction:column}.preview-modes{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.preview-modes button{padding:0 6px}.canvas-actions>*{flex:1 1 calc(50% - 5px)}.readability-stats{grid-template-columns:1fr}.control-grid{grid-template-columns:1fr}.stop-row{grid-template-columns:36px 42px minmax(0,1fr) 34px 34px}.stop-index{grid-column:1;grid-row:1}.stop-color-button{grid-column:2;grid-row:1}.stop-hex{grid-column:3;grid-row:1}.duplicate-stop{grid-column:4;grid-row:1}.remove-stop{grid-column:5;grid-row:1}.stop-row input[type=range]{grid-column:2/4;grid-row:2}.stop-position-number{grid-column:4/6;grid-row:2}.saved-list{grid-template-columns:1fr}.export-actions{grid-template-columns:1fr}.type-scene h3{font-size:clamp(2.8rem,16vw,5.8rem)}}@media(max-width:420px){.gradient-canvas-panel,.gradient-editor,.handoff-card,.saved-section{border-radius:19px}.gradient-preview{min-height:420px}.angle-presets{grid-template-columns:repeat(4,1fr)}.readability-samples{grid-template-columns:repeat(6,1fr)}.readability-samples span:last-child{grid-column:auto}.canvas-actions .icon-button{flex:0 0 42px}.interface-content{padding:24px}}