: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}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}.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 10%);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,.analysis-top,.analysis-button-row{display:flex;align-items:center}.brand{flex:0 0 auto;gap:.65rem;font-weight:850;font-size:1.05rem}.brand-mark{display:grid;width:2.35rem;height:2.35rem;place-items:center;border-radius:.65rem;background:var(--primary);color:var(--surface)}.nav{justify-content:flex-end;gap:clamp(.45rem,1.4vw,1.1rem);color:var(--muted);font-size:.95rem}.nav a,.nav-action{display:inline-flex;min-height:2.35rem;align-items:center;justify-content:center;white-space:nowrap}.nav a:hover{color:var(--text)}.nav-action,.compact-action,.ghost-button,.visual-copy button,.icon-close,.analysis-action,.analysis-upload,.analysis-mode,.ai-run,.chip,.generate,.palette-card,.icon-toggle,.color-value{border:0;cursor:pointer}.nav-action{border-radius:.4rem;padding:0 .8rem;background:var(--primary);color:var(--surface);font-weight:850}.workspace{display:grid;grid-template-columns:minmax(18rem,24rem) minmax(0,1fr);gap:clamp(1rem,3vw,2rem);align-items:start;padding:clamp(1rem,4vw,3rem)}.panel,.rules{border:1px solid color-mix(in srgb,var(--muted),transparent 80%);border-radius:.5rem;background:color-mix(in srgb,var(--surface),transparent 8%);box-shadow:0 1.5rem 4rem color-mix(in srgb,var(--text),transparent 92%)}.generator{position:sticky;top:5.6rem;display:grid;gap:.8rem;padding:clamp(.9rem,1.8vw,1.15rem)}.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,.analysis-top p{margin:0 0 .2rem;color:var(--muted);font-size:.78rem;font-weight:750;text-transform:uppercase}.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:.75rem;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{min-height:2.35rem;border-radius:999px;padding:0 .8rem;background:color-mix(in srgb,var(--secondary),transparent 35%);color:var(--text);white-space:nowrap}.chip.active,.generate,.icon-toggle.active,.example-actions a:first-child,.compact-action,.visual-copy button,.ai-run{background:var(--primary);color:var(--surface)}.generate:disabled,.ai-run:disabled{cursor:not-allowed;opacity:.58}.generate,.compact-action,.visual-copy button,.ai-run,.ghost-button{display:inline-flex;min-height:2.9rem;align-items:center;justify-content:center;gap:.55rem;border-radius:.45rem;padding:0 1rem;font-weight:850;text-align:center}.palette-list{display:grid;gap:.7rem}.palette-error{margin:-.25rem 0 0;padding:.75rem;border:1px solid color-mix(in srgb,#ba3b2d,transparent 58%);border-radius:.45rem;background:color-mix(in srgb,#ba3b2d,transparent 92%);color:#8f2f25;font-size:.9rem;line-height:1.45}.palette-card{display:grid;width:100%;gap:.65rem;padding:.75rem;border:1px solid color-mix(in srgb,var(--muted),transparent 76%);border-radius:.5rem;background:var(--surface);color:var(--text);text-align:left}.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;min-width:0}.palette-meta>span{display:flex;align-items:center;justify-content:space-between;min-width:0;gap:.75rem}.palette-meta strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.palette-meta em{display:inline-flex;flex:0 0 auto;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;min-height:1.55rem;overflow:hidden;grid-template-columns:repeat(7,minmax(0,1fr));border-radius:.35rem;border:1px solid color-mix(in srgb,var(--text),transparent 88%);background:color-mix(in srgb,var(--muted),transparent 86%)}.swatches i{display:block;min-width:0}.color-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;padding-top:.65rem}.color-details{border:1px solid color-mix(in srgb,var(--muted),transparent 80%);border-radius:.45rem;background:color-mix(in srgb,var(--surface),transparent 4%)}.color-details summary{min-height:2.55rem;padding:.7rem .8rem;color:var(--text);cursor:pointer;font-weight:850}.color-details .color-values{padding:0 .65rem .65rem}.color-value{display:grid;width:100%;min-height:3.05rem;grid-template-columns:1.35rem minmax(0,1fr);align-items:center;gap:.35rem .45rem;padding:.45rem;border:1px solid color-mix(in srgb,var(--muted),transparent 80%);border-radius:.45rem;background:color-mix(in srgb,var(--surface),transparent 4%);color:var(--text);text-align:left}.color-value span{display:block;width:1.25rem;height:1.25rem;border:1px solid color-mix(in srgb,var(--text),transparent 82%);border-radius:.35rem}.color-value strong{overflow:hidden;font-size:.82rem;text-overflow:ellipsis;white-space:nowrap}.color-value code{grid-column:1 / -1;overflow:hidden;color:var(--muted);font-family:inherit;font-size:.74rem;text-overflow:ellipsis;white-space:nowrap}.color-value.copied{border-color:var(--primary);background:color-mix(in srgb,var(--secondary),transparent 28%)}.experience{display:grid;min-width:0;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-flex;min-width:2.45rem;min-height:2.35rem;align-items:center;justify-content:center;gap:.45rem;border-radius:.35rem;padding:0 .75rem;background:transparent;color:var(--muted);white-space:nowrap}.example-hero{position:relative;display:grid;min-height:0;gap:clamp(.9rem,2vw,1.25rem);overflow:hidden;padding:clamp(.9rem,2.4vw,1.5rem);border:1px solid color-mix(in srgb,var(--muted),transparent 80%);border-radius:.5rem;background:linear-gradient(180deg,color-mix(in srgb,var(--secondary),transparent 32%),transparent 55%),var(--surface)}.preview-topline{position:relative;z-index:2;display:flex;min-height:3.4rem;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid color-mix(in srgb,var(--muted),transparent 82%)}.preview-topline strong{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;border-radius:.4rem;background:var(--primary);color:var(--surface);font-size:.9rem}.preview-topline nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:clamp(.8rem,2vw,1.5rem);color:var(--muted);font-weight:750}.preview-hero{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,22rem);align-items:stretch;gap:clamp(1rem,3vw,2rem)}.preview-copy{position:relative;z-index:2;display:grid;align-content:center;min-height:clamp(13rem,30vh,20rem);max-width:48rem}.eyebrow{display:inline-block;margin-bottom:.75rem;color:var(--primary);font-size:.78rem;font-weight:850;text-transform:uppercase}.preview-copy h3{margin-bottom:.85rem;font-size:clamp(2rem,4.2vw,3.6rem);line-height:1;letter-spacing:0}.preview-copy p{max-width:34rem;color:var(--muted);font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.7}.example-actions{flex-wrap:wrap;gap:.7rem}.example-actions a,.ghost-button{min-width:9.5rem}.example-actions a{display:inline-flex;min-height:2.8rem;align-items:center;justify-content:center;border-radius:.4rem;padding:0 1rem;font-weight:850}.ghost-button{background:color-mix(in srgb,var(--secondary),transparent 26%);color:var(--text)}.preview-panel{display:grid;align-content:start;gap:.85rem;min-height:100%;padding:clamp(.95rem,1.8vw,1.2rem);border:1px solid color-mix(in srgb,var(--muted),transparent 78%);border-radius:.5rem;background:color-mix(in srgb,var(--secondary),var(--surface) 58%)}.preview-panel span,.preview-grid span{color:var(--primary);font-size:.78rem;font-weight:850;text-transform:uppercase}.preview-panel strong{font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.1}.preview-panel p,.preview-grid p{margin:0;color:var(--muted);line-height:1.5}.preview-panel button{justify-self:start;min-height:2.65rem;border:0;border-radius:.45rem;padding:0 1rem;background:var(--primary);color:var(--surface);font-weight:850}.preview-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.preview-grid article{display:grid;align-content:start;gap:.45rem;min-height:7rem;padding:.9rem;border:1px solid color-mix(in srgb,var(--muted),transparent 82%);border-radius:.45rem;background:color-mix(in srgb,var(--surface),transparent 3%)}.preview-grid strong{font-size:1.05rem}.thirds-overlay{position:absolute;z-index:4;inset:0;pointer-events:none;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{top:-.55rem;left:50%;width:2px;height:2rem;transform:translate(-50%)}.thirds-point:after{top:50%;left:-.55rem;width:2rem;height:2px;transform:translateY(-50%)}.thirds-point.top-left{top:33.333%;left:33.333%}.thirds-point.top-right{top:33.333%;left:66.666%}.thirds-point.bottom-left{top:66.666%;left:33.333%}.thirds-point.bottom-right{top:66.666%;left:66.666%}.rules{margin:0 clamp(1rem,4vw,3rem) clamp(1rem,4vw,3rem);padding:clamp(1rem,3vw,2rem)}.rules-switch{flex-wrap:wrap}.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:1px solid color-mix(in srgb,var(--muted),transparent 80%);border-radius:.5rem;background:var(--surface)}.visual-copy{position:absolute;bottom:1.2rem;left:1.2rem;display:grid;max-width:min(25rem,calc(100% - 2.4rem));gap:.65rem;padding:1rem;border-radius:.45rem;background:color-mix(in srgb,var(--surface),transparent 8%);color:var(--text);box-shadow:0 1rem 2rem color-mix(in srgb,var(--text),transparent 90%)}.visual-copy p{margin: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);aspect-ratio:1.618 / 1;margin:0;place-items:center;padding:clamp(.6rem,2vw,1rem);border:1px solid color-mix(in srgb,var(--text),transparent 72%);border-radius:.45rem;background:#fff;box-shadow:0 1rem 2.2rem color-mix(in srgb,var(--text),transparent 91%)}.golden-image-frame img{display:block;width:100%;height:100%;object-fit:fill}.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;min-height:26rem;place-content:center;gap:.7rem;padding:2rem}.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-left:.35rem solid var(--primary);border-radius:.5rem;background:color-mix(in srgb,var(--secondary),transparent 35%)}.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;min-height:7.6rem;gap:.45rem;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-modal{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:clamp(.65rem,2vw,1.2rem);background:#0a0e0c94;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.analysis-window{display:grid;width:min(96rem,100%);max-height:min(54rem,calc(100vh - 1.4rem));grid-template-rows:auto minmax(0,1fr);overflow:hidden;border:1px solid color-mix(in srgb,var(--muted),transparent 70%);border-radius:.5rem;background:var(--surface);box-shadow:0 2rem 5rem #00000052}.analysis-top{justify-content:space-between;gap:1rem;padding:1rem clamp(1rem,2vw,1.4rem);border-bottom:1px solid color-mix(in srgb,var(--muted),transparent 82%)}.icon-close{display:grid;flex:0 0 auto;width:2.7rem;height:2.7rem;place-items:center;border-radius:.45rem;background:color-mix(in srgb,var(--secondary),transparent 35%);color:var(--text)}.analysis-layout{display:grid;min-height:0;grid-template-columns:minmax(19rem,23rem) minmax(0,1fr)}.analysis-sidebar{display:grid;min-height:0;align-content:start;gap:.85rem;overflow:auto;padding:1rem;border-right:1px solid color-mix(in srgb,var(--muted),transparent 82%)}.analysis-url{display:grid;min-height:2.75rem;grid-template-columns:3.3rem minmax(0,1fr);align-items:center;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;border-right:1px solid color-mix(in srgb,var(--muted),transparent 82%);color:var(--muted);font-size:.82rem;font-weight:850}.analysis-url input{min-width:0;height:100%;border:0;padding:0 .75rem;background:transparent;color:var(--text);font-size:.88rem}.analysis-button-row{gap:.55rem}.analysis-action,.analysis-upload{display:inline-flex;min-height:2.75rem;flex:1 1 0;align-items:center;justify-content:center;gap:.45rem;border-radius:.45rem;padding:0 .75rem;font-weight:850;text-align:center}.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-mode-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.analysis-mode{display:inline-flex;min-height:2.65rem;align-items:center;justify-content:center;gap:.45rem;border:1px solid color-mix(in srgb,var(--muted),transparent 78%);border-radius:.45rem;background:color-mix(in srgb,var(--secondary),transparent 45%);color:var(--text);font-weight:800;white-space:nowrap}.analysis-mode.active{border-color:var(--primary);background:var(--primary);color:var(--surface)}.ai-run{width:100%}.spin{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.ai-result{display:grid;gap:.8rem;padding:.9rem;border:1px solid color-mix(in srgb,var(--muted),transparent 78%);border-radius:.5rem;background:color-mix(in srgb,var(--secondary),transparent 52%)}.ai-result.muted,.ai-result.error{color:var(--muted);line-height:1.5}.ai-result.error{border-color:color-mix(in srgb,#c0392b,transparent 35%);background:color-mix(in srgb,#c0392b,transparent 92%);color:#8f2a20}.ai-score{display:grid;gap:.35rem}.ai-score strong{font-size:2rem;line-height:1}.ai-score span,.result-list li{color:var(--muted);line-height:1.45}.result-list{display:grid;gap:.35rem}.result-list ul{display:grid;gap:.35rem;margin:0;padding-left:1.05rem}.analysis-canvas-shell{display:grid;min-width:0;min-height:0;align-content:start;gap:.7rem;padding:1rem;overflow:auto;background:linear-gradient(135deg,color-mix(in srgb,var(--secondary),transparent 64%),transparent),color-mix(in srgb,var(--surface),var(--page) 50%)}.analysis-source{display:flex;min-height:2rem;align-items:center;color:var(--muted);font-size:.86rem;font-weight:800}.analysis-source span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.analysis-canvas{position:relative;container-type:size;width:100%;aspect-ratio:16 / 9;min-height:20rem;overflow:hidden;border:1px solid color-mix(in srgb,var(--muted),transparent 66%);border-radius:.5rem;background:#fff}.analysis-preview,.analysis-site-frame{display:block;width:100%;height:100%;border:0;background:#fff}.analysis-preview{object-fit:cover}.analysis-site-frame{overflow:auto}.analysis-empty{position:relative;z-index:1;display:grid;width:100%;height:100%;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{position:absolute;z-index:5;inset:0;pointer-events:none}.analysis-golden{opacity:.56;mix-blend-mode:multiply}.analysis-golden img{display:block;width:105%;height:105%;object-fit:fill;transform:translate(-2.5%,-2.5%)}.to-top{position:fixed;z-index:25;right:1rem;bottom:1rem;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:980px){.analysis-layout{grid-template-columns:1fr}.analysis-sidebar{border-right:0;border-bottom:1px solid color-mix(in srgb,var(--muted),transparent 82%)}}@media(max-width:820px){.workspace,.rule-stage{grid-template-columns:1fr}.generator{position:static}}@media(max-width:1050px)and (min-width:821px){.preview-copy h3{font-size:clamp(2rem,5vw,3.3rem)}}@media(max-width:720px){.topbar,.experience-heading,.rules-heading,.analysis-top{align-items:flex-start;flex-direction:column}.nav{width:100%;flex-wrap:wrap;justify-content:flex-start}.nav-action{flex:1 1 9rem}.workspace{padding-inline:.75rem}.example-hero{min-height:0}.preview-hero,.preview-grid{grid-template-columns:1fr}.preview-copy{min-height:0}.preview-copy h3{font-size:clamp(2.2rem,14vw,4.2rem)}.preview-topline{align-items:flex-start;flex-direction:column;padding-bottom:.9rem}.contrast-demo{grid-template-columns:1fr}.rules{margin-inline:.75rem}.analysis-window{max-height:calc(100vh - 1rem)}.analysis-button-row{flex-direction:column}.analysis-action,.analysis-upload{width:100%;flex:none}.analysis-canvas{min-height:16rem}}@media(max-width:520px){.mood-grid,.analysis-mode-list{grid-template-columns:1fr}.color-value{grid-template-columns:1.55rem minmax(0,1fr)}.color-value code{grid-column:2}.rules-switch,.segmented,.compact-action{width:100%}.rules-switch .icon-toggle{flex:1 1 45%}.example-actions a,.ghost-button{width:100%}}