:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:var(--page);color:var(--text)}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--accent),transparent 12%);outline-offset:3px}a{color:inherit;text-decoration:none}.app{min-height:100vh;background:linear-gradient(180deg,color-mix(in srgb,var(--secondary),transparent 42%),transparent 36rem),var(--page);color:var(--text);transition:background .22s ease,color .22s ease}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem clamp(1rem,4vw,3rem);background:color-mix(in srgb,var(--surface),transparent 12%);border-bottom:1px solid color-mix(in srgb,var(--muted),transparent 78%);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.brand,.nav,.panel-title,.experience-heading,.analysis-heading,.analysis-controls,.rules-heading,.segmented,.example-actions{display:flex;align-items:center}.brand{gap:.65rem;font-weight:850;font-size:1.05rem}.brand-mark{display:grid;width:2.35rem;height:2.35rem;place-items:center;border-radius:.7rem;background:var(--primary);color:var(--surface)}.nav{gap:clamp(.6rem,2vw,1.4rem);color:var(--muted);font-size:.95rem}.nav a:hover{color:var(--text)}.workspace{display:grid;grid-template-columns:minmax(17rem,24rem) minmax(0,1fr);gap:clamp(1rem,3vw,2rem);padding:clamp(1rem,4vw,3rem);align-items:start}.panel,.rules{border:1px solid color-mix(in srgb,var(--muted),transparent 80%);background:color-mix(in srgb,var(--surface),transparent 8%);box-shadow:0 1.5rem 4rem color-mix(in srgb,var(--text),transparent 92%)}.panel,.rules{border-radius:.5rem}.generator{position:sticky;top:5.6rem;display:grid;gap:1rem;padding:clamp(1rem,2vw,1.35rem)}.panel-title{gap:.75rem}.panel-title svg,.rules-heading svg,.check-card svg{color:var(--primary)}.panel-title p,.experience-heading p,.rules-heading p{margin:0 0 .2rem;color:var(--muted);font-size:.78rem;font-weight:750;text-transform:uppercase}h1,h2,h3,p{margin-top:0}h1{margin-bottom:0;font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.08}h2{margin-bottom:0;font-size:clamp(1.2rem,2.1vw,1.65rem);line-height:1.12}.field{display:grid;gap:.45rem;color:var(--muted);font-size:.92rem;font-weight:700}.field textarea{width:100%;resize:vertical;border:1px solid color-mix(in srgb,var(--muted),transparent 72%);border-radius:.45rem;padding:.85rem;background:var(--surface);color:var(--text);line-height:1.45}.mood-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.chip,.generate,.palette-card,.icon-toggle,.analysis-action,.example-actions a,.analysis-upload,.color-value{border:0;cursor:pointer}.chip{min-height:2.35rem;border-radius:999px;background:color-mix(in srgb,var(--secondary),transparent 35%);color:var(--text)}.chip.active,.generate,.icon-toggle.active,.example-actions a:first-child{background:var(--primary);color:var(--surface)}.generate:disabled{cursor:not-allowed;opacity:.52}.generate{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:2.9rem;border-radius:.5rem;font-weight:800}.palette-list{display:grid;gap:.7rem}.palette-card{display:grid;gap:.8rem;width:100%;padding:.85rem;text-align:left;border:1px solid color-mix(in srgb,var(--muted),transparent 76%);border-radius:.5rem;background:var(--surface);color:var(--text)}.palette-card.active{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary),transparent 82%)}.palette-meta{display:grid;gap:.2rem}.palette-meta>span{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.palette-meta em{display:inline-flex;align-items:center;gap:.25rem;color:var(--primary);font-size:.76rem;font-style:normal;font-weight:850}.palette-meta small{color:var(--muted);line-height:1.35}.swatches{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));overflow:hidden;min-height:2rem;border-radius:.35rem}.swatches i{display:block}.color-values{display:grid;gap:.5rem;padding-top:.15rem}.color-value{display:grid;grid-template-columns:1.85rem minmax(4.8rem,.8fr) minmax(0,1fr);align-items:center;gap:.55rem;min-height:2.6rem;width:100%;padding:.45rem .55rem;border-radius:.45rem;background:color-mix(in srgb,var(--surface),transparent 4%);color:var(--text);border:1px solid color-mix(in srgb,var(--muted),transparent 80%);text-align:left}.color-value span{display:block;width:1.55rem;height:1.55rem;border-radius:.35rem;border:1px solid color-mix(in srgb,var(--text),transparent 82%)}.color-value strong{font-size:.82rem}.color-value code{overflow:hidden;color:var(--muted);font-family:inherit;font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}.color-value.copied{border-color:var(--primary);background:color-mix(in srgb,var(--secondary),transparent 28%)}.experience{min-width:0;display:grid;gap:clamp(1rem,2vw,1.35rem)}.experience-heading,.rules-heading{justify-content:space-between;gap:1rem}.segmented{gap:.25rem;padding:.25rem;border-radius:.5rem;background:color-mix(in srgb,var(--secondary),transparent 35%)}.icon-toggle{display:inline-grid;min-width:2.45rem;min-height:2.25rem;place-items:center;border-radius:.35rem;background:transparent;color:var(--muted)}.example-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.16fr) minmax(14rem,.84fr);gap:clamp(1rem,4vw,3rem);min-height:clamp(28rem,58vh,42rem);padding:clamp(1.4rem,5vw,4.5rem);align-items:center;overflow:hidden;border-radius:.5rem;background:radial-gradient(circle at 84% 18%,color-mix(in srgb,var(--accent),transparent 72%),transparent 15rem),linear-gradient(135deg,color-mix(in srgb,var(--secondary),transparent 12%),color-mix(in srgb,var(--surface),transparent 28%));border:1px solid color-mix(in srgb,var(--muted),transparent 80%)}.example-copy{position:relative;z-index:2;max-width:46rem}.eyebrow{display:inline-block;margin-bottom:.75rem;color:var(--primary);font-weight:850;text-transform:uppercase;font-size:.78rem}.example-copy h3{margin-bottom:1rem;font-size:clamp(2.4rem,6vw,5.6rem);line-height:.98;letter-spacing:0}.example-copy p{max-width:34rem;color:var(--muted);line-height:1.7;font-size:clamp(1rem,1.5vw,1.12rem)}.example-actions{gap:.7rem;flex-wrap:wrap}.example-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:2.65rem;border-radius:.4rem;padding:0 1rem;font-weight:800}.example-actions .ghost{background:color-mix(in srgb,var(--secondary),transparent 26%);color:var(--text)}.example-visual{position:relative;display:grid;grid-template-columns:1fr .64fr;grid-template-rows:1fr .62fr .42fr;gap:.9rem;min-height:22rem}.example-visual span{border-radius:.5rem;border:1px solid color-mix(in srgb,var(--surface),transparent 55%);background:color-mix(in srgb,var(--primary),transparent 8%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text),transparent 88%)}.example-visual span:nth-child(1){grid-row:1 / 4;background:var(--primary)}.example-visual span:nth-child(2){background:var(--accent)}.example-visual span:nth-child(3){background:var(--secondary)}.example-visual span:nth-child(4){background:color-mix(in srgb,var(--surface),var(--accent) 16%)}.example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.example-grid article{display:grid;gap:.4rem;min-height:9.4rem;padding:1rem;border:1px solid color-mix(in srgb,var(--muted),transparent 80%);border-radius:.5rem;background:var(--surface)}.example-grid i{width:2.1rem;height:2.1rem;border-radius:.45rem;background:var(--accent)}.example-grid span{color:var(--muted)}.thirds-overlay{position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,transparent calc(33.333% - 1px),#ff2a1f calc(33.333% - 1px),#ff2a1f calc(33.333% + 1px),transparent calc(33.333% + 1px),transparent calc(66.666% - 1px),#ff2a1f calc(66.666% - 1px),#ff2a1f calc(66.666% + 1px),transparent calc(66.666% + 1px)),linear-gradient(0deg,transparent calc(33.333% - 1px),#ff2a1f calc(33.333% - 1px),#ff2a1f calc(33.333% + 1px),transparent calc(33.333% + 1px),transparent calc(66.666% - 1px),#ff2a1f calc(66.666% - 1px),#ff2a1f calc(66.666% + 1px),transparent calc(66.666% + 1px))}.thirds-point{position:absolute;width:1rem;height:1rem;border:2px solid #ff2a1f;transform:translate(-50%,-50%)}.thirds-point:before,.thirds-point:after{position:absolute;content:"";background:#ff2a1f}.thirds-point:before{left:50%;top:-.55rem;width:2px;height:2rem;transform:translate(-50%)}.thirds-point:after{left:-.55rem;top:50%;width:2rem;height:2px;transform:translateY(-50%)}.thirds-point.top-left{left:33.333%;top:33.333%}.thirds-point.top-right{left:66.666%;top:33.333%}.thirds-point.bottom-left{left:33.333%;top:66.666%}.thirds-point.bottom-right{left:66.666%;top:66.666%}.rules{margin:0 clamp(1rem,4vw,3rem) clamp(1rem,4vw,3rem);padding:clamp(1rem,3vw,2rem);border-radius:.5rem}.rules-switch{flex-wrap:wrap}.rules-switch .icon-toggle{display:inline-flex;gap:.45rem;padding:0 .7rem}.rule-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,24rem);gap:1rem}.visual-card{position:relative;overflow:hidden;min-height:26rem;border-radius:.5rem;background:var(--surface);border:1px solid color-mix(in srgb,var(--muted),transparent 80%)}.visual-copy{position:absolute;left:1.2rem;bottom:1.2rem;max-width:25rem;padding:1rem;border-radius:.45rem;background:color-mix(in srgb,var(--surface),transparent 10%);color:var(--text);box-shadow:0 1rem 2rem color-mix(in srgb,var(--text),transparent 90%)}.visual-copy p{margin:.35rem 0 0;color:var(--muted);line-height:1.55}.phi-demo{display:grid;align-content:center;gap:1rem;place-items:center;padding:clamp(1rem,3vw,2rem);background:color-mix(in srgb,var(--surface),transparent 5%)}.golden-image-frame{display:grid;width:min(100%,34rem);margin:0;place-items:center;padding:clamp(.6rem,2vw,1rem);border-radius:.45rem;background:#fff;border:1px solid color-mix(in srgb,var(--text),transparent 72%);box-shadow:0 1rem 2.2rem color-mix(in srgb,var(--text),transparent 91%)}.golden-image-frame img{display:block;width:100%;height:auto}.phi-demo .visual-copy{position:static;width:min(100%,34rem);max-width:none;box-shadow:none}.thirds-demo{background:linear-gradient(145deg,var(--secondary),transparent),var(--surface)}.contrast-demo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:color-mix(in srgb,var(--muted),transparent 70%)}.contrast-good,.contrast-bad{display:grid;place-content:center;gap:.7rem;padding:2rem;min-height:26rem}.contrast-good{background:var(--primary);color:var(--surface)}.contrast-bad{background:var(--secondary);color:color-mix(in srgb,var(--secondary),var(--muted) 24%)}.contrast-good strong,.contrast-bad strong{font-size:clamp(1.5rem,3vw,2.6rem);line-height:1}.blindness-demo{display:grid;align-content:center;gap:1rem;padding:clamp(1rem,4vw,3rem);background:var(--surface)}.fake-banner{display:grid;min-height:5rem;place-items:center;border-radius:.5rem;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--accent),transparent 20%),color-mix(in srgb,var(--accent),transparent 20%) 12px,color-mix(in srgb,var(--primary),transparent 15%) 12px 24px);color:var(--surface);font-size:1.5rem;font-weight:900;opacity:.48}.real-content{display:grid;gap:.35rem;padding:1.2rem;border-radius:.5rem;background:color-mix(in srgb,var(--secondary),transparent 35%);border-left:.35rem solid var(--primary)}.real-content span{color:var(--muted)}.content-row{height:1rem;border-radius:999px;background:color-mix(in srgb,var(--muted),transparent 78%)}.content-row.short{width:64%}.rule-checks{display:grid;grid-template-columns:1fr;gap:1rem}.check-card{display:grid;gap:.45rem;min-height:7.6rem;padding:1rem;border:1px solid color-mix(in srgb,var(--muted),transparent 80%);border-radius:.5rem;background:var(--surface)}.check-card span{color:var(--muted);line-height:1.45}.analysis-lab{display:grid;gap:1rem;margin-top:1rem;padding-top:1rem;border-top:1px solid color-mix(in srgb,var(--muted),transparent 82%)}.analysis-heading{justify-content:space-between;gap:1rem}.analysis-heading p{margin:0 0 .2rem;color:var(--muted);font-size:.78rem;font-weight:750;text-transform:uppercase}.analysis-controls{flex-wrap:wrap;justify-content:flex-end;gap:.6rem}.analysis-url{display:grid;grid-template-columns:auto minmax(13rem,20rem);align-items:center;min-height:2.65rem;overflow:hidden;border:1px solid color-mix(in srgb,var(--muted),transparent 72%);border-radius:.45rem;background:var(--surface)}.analysis-url span{display:grid;height:100%;min-width:3.3rem;place-items:center;color:var(--muted);font-size:.82rem;font-weight:850;border-right:1px solid color-mix(in srgb,var(--muted),transparent 82%)}.analysis-url input{min-width:0;height:100%;border:0;padding:0 .75rem;background:transparent;color:var(--text)}.analysis-action,.analysis-upload{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.65rem;border-radius:.45rem;padding:0 .9rem;font-weight:850}.analysis-action{background:var(--primary);color:var(--surface)}.analysis-upload{position:relative;overflow:hidden;background:color-mix(in srgb,var(--secondary),transparent 26%);color:var(--text)}.analysis-upload input{position:absolute;inset:0;cursor:pointer;opacity:0}.analysis-frame{position:relative;overflow:hidden;min-height:clamp(24rem,64vh,44rem);border:1px solid color-mix(in srgb,var(--muted),transparent 74%);border-radius:.5rem;background:linear-gradient(135deg,color-mix(in srgb,var(--secondary),transparent 62%),transparent),#fff}.analysis-frame iframe,.analysis-image{display:block;width:100%;height:clamp(24rem,64vh,44rem);border:0}.analysis-image{object-fit:contain;background:#fff}.analysis-empty{position:relative;z-index:1;display:grid;min-height:clamp(24rem,64vh,44rem);place-content:center;gap:.55rem;padding:2rem;text-align:center}.analysis-empty strong{font-size:clamp(1.3rem,3vw,2rem)}.analysis-empty span{max-width:34rem;color:var(--muted);line-height:1.6}.analysis-golden,.analysis-contrast,.analysis-blindness{position:absolute;inset:0;pointer-events:none;z-index:2}.analysis-golden{padding:clamp(.75rem,2vw,1.4rem);background-position:center;background-repeat:no-repeat;background-size:contain;opacity:.62;mix-blend-mode:multiply}.analysis-contrast{background:linear-gradient(90deg,rgb(0 0 0 / .28),transparent 34%,transparent 66%,rgb(255 255 255 / .38)),linear-gradient(0deg,transparent 50%,rgb(255 42 31 / .28) 50%,transparent calc(50% + 2px))}.analysis-contrast span:first-child,.analysis-contrast span:last-child,.analysis-blindness span{position:absolute;border:2px solid #ff2a1f}.analysis-contrast span:first-child{left:6%;top:10%;width:36%;height:20%}.analysis-contrast span:last-child{right:6%;bottom:10%;width:36%;height:20%}.analysis-blindness{background:linear-gradient(90deg,transparent 0 68%,rgb(255 42 31 / .1) 68% 100%)}.analysis-blindness span:first-child{right:4%;top:9%;width:28%;height:18%}.analysis-blindness span:last-child{right:4%;top:34%;width:28%;height:18%}.to-top{position:fixed;right:1rem;bottom:1rem;z-index:25;display:grid;width:2.8rem;height:2.8rem;place-items:center;border-radius:50%;background:var(--primary);color:var(--surface);box-shadow:0 1rem 2rem color-mix(in srgb,var(--text),transparent 84%)}@media(max-width:820px){.workspace,.rule-stage{grid-template-columns:1fr}.generator{position:static}}@media(max-width:1050px)and (min-width:821px){.example-hero{grid-template-columns:1fr;min-height:0}.example-copy h3{font-size:clamp(2rem,5vw,3.3rem)}.example-visual{min-height:12rem}}@media(max-width:720px){.topbar,.experience-heading,.analysis-heading,.rules-heading{align-items:flex-start;flex-direction:column}.nav{width:100%;justify-content:space-between}.workspace{padding-inline:.75rem}.example-hero{grid-template-columns:1fr;min-height:0}.example-visual{min-height:12rem}.example-grid,.contrast-demo{grid-template-columns:1fr}.rules{margin-inline:.75rem}.analysis-controls,.analysis-url,.analysis-action,.analysis-upload{width:100%}.analysis-url{grid-template-columns:3.3rem minmax(0,1fr)}}@media(max-width:440px){.mood-grid{grid-template-columns:1fr}.color-value{grid-template-columns:1.55rem minmax(0,1fr)}.color-value code{grid-column:2}.rules-switch,.segmented{width:100%}.rules-switch .icon-toggle{flex:1 1 45%}}