: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,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}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,.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,.example-actions button{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 button:first-child{background:var(--primary);color:var(--surface)}.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 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}.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 button{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,.phi-overlay{position:absolute;inset:0;pointer-events:none;z-index:1}.thirds-overlay{background:linear-gradient(90deg,transparent 33.2%,color-mix(in srgb,var(--primary),transparent 35%) 33.3%,transparent 33.5%,transparent 66.5%,color-mix(in srgb,var(--primary),transparent 35%) 66.6%,transparent 66.8%),linear-gradient(0deg,transparent 33.2%,color-mix(in srgb,var(--primary),transparent 35%) 33.3%,transparent 33.5%,transparent 66.5%,color-mix(in srgb,var(--primary),transparent 35%) 66.6%,transparent 66.8%)}.phi-overlay{z-index:3}.phi-line{position:absolute;background:color-mix(in srgb,var(--accent),var(--text) 12%);opacity:.74;box-shadow:0 0 0 1px color-mix(in srgb,var(--surface),transparent 28%)}.phi-line.vertical{left:61.8%;top:0;width:2px;height:100%}.phi-line.horizontal{left:0;top:61.8%;width:100%;height:2px}.phi-label{position:absolute;display:grid;min-height:1.9rem;place-items:center;border-radius:999px;padding:0 .65rem;background:color-mix(in srgb,var(--surface),transparent 8%);color:var(--text);border:1px solid color-mix(in srgb,var(--accent),transparent 34%);font-size:.78rem;font-weight:850;box-shadow:0 .7rem 1.7rem color-mix(in srgb,var(--text),transparent 90%)}.phi-label.main{left:calc(30.9% - 2.2rem);top:1rem}.phi-label.side{left:calc(80.9% - 2.2rem);top:1rem}.phi-label.bottom{left:calc(61.8% + .7rem);top:calc(61.8% + .7rem)}.phi-target{position:absolute;left:calc(61.8% - .42rem);top:calc(61.8% - .42rem);width:.84rem;height:.84rem;border-radius:50%;background:var(--accent);opacity:.9;box-shadow:0 0 0 .65rem color-mix(in srgb,var(--accent),transparent 78%)}.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;place-items:center;padding:clamp(1rem,3vw,2rem);background:color-mix(in srgb,var(--secondary),transparent 22%)}.golden-diagram{width:min(100%,50rem);height:auto;max-height:23rem;overflow:visible}.golden-bg{fill:color-mix(in srgb,var(--surface),transparent 8%);stroke:color-mix(in srgb,var(--text),transparent 78%);stroke-width:2}.golden-main{fill:color-mix(in srgb,var(--primary),transparent 86%);stroke:var(--primary);stroke-width:2}.golden-side{fill:color-mix(in srgb,var(--accent),transparent 85%);stroke:var(--accent);stroke-width:2}.golden-ratio-line{stroke:color-mix(in srgb,var(--accent),var(--text) 12%);stroke-width:3;stroke-dasharray:10 9}.golden-text,.golden-note{fill:var(--text);font-weight:850}.golden-text{font-size:28px}.golden-note{font-size:22px}.fib-grid rect{fill:transparent;stroke:color-mix(in srgb,var(--primary),transparent 18%);stroke-width:3}.fib-spiral{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round}.thirds-demo{background:linear-gradient(145deg,var(--secondary),transparent),var(--surface)}.focus-point{position:absolute;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--accent);box-shadow:0 0 0 .7rem color-mix(in srgb,var(--accent),transparent 78%)}.focus-point.one{left:33.3%;top:33.3%}.focus-point.two{left:66.6%;top:66.6%}.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}.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,.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}}@media(max-width:440px){.mood-grid{grid-template-columns:1fr}.rules-switch,.segmented{width:100%}.rules-switch .icon-toggle{flex:1 1 45%}}