:root{--mint:#9df2d8}

.zirflo-page{width:min(1180px,calc(100% - 40px));margin:0 auto;padding-bottom:90px}
.zirflo-masthead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:end;padding:84px 0 42px}
.zirflo-masthead h1{margin:8px 0 12px;font-size:clamp(4.8rem,11vw,10rem);line-height:.82;letter-spacing:-.085em}
.zirflo-intro{margin:0;color:var(--soft);font-size:1.12rem}
.brief-card{min-width:280px;padding:20px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025);display:grid;gap:5px}
.brief-label{font-size:.68rem;font-weight:800;letter-spacing:.17em;color:var(--accent)}
.brief-card strong{font-size:1.05rem}.brief-card span:last-child{font-size:.84rem;color:var(--muted)}

.feed-controls{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(8,11,16,.9);backdrop-filter:blur(18px)}
.feed-tabs{display:flex;gap:5px;overflow:auto}.tab{border:0;border-radius:10px;padding:9px 12px;background:transparent;color:var(--muted);font:inherit;font-size:.84rem;cursor:pointer;white-space:nowrap}
.tab:hover,.tab.active{background:rgba(255,255,255,.055);color:var(--text)}
.feed-meta{display:flex;align-items:center;color:#6f7f8e;font-size:.8rem;white-space:nowrap}.meta-dot{padding:0 6px}
.reset-link{margin-left:10px;padding:0;border:0;background:transparent;color:#70879a;font:inherit;font-size:.8rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.reset-link:hover{color:var(--text)}

.story-wall{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;padding:24px 0}
.story-card{position:relative;overflow:hidden;min-height:0;padding:0;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008)),var(--panel);box-shadow:0 14px 45px rgba(0,0,0,.19);transition:transform .2s ease,border-color .2s ease,opacity .2s ease}
.story-card:hover{transform:translateY(-2px);border-color:#35465a}
.story-card.preference-more{border-color:#345d5d}.story-card.preference-less{opacity:.58}
.story-hero{grid-column:span 8}.tall{grid-column:span 4;padding:24px}.medium{grid-column:span 4;padding:24px}.image-card{grid-column:span 4}.quote-card{grid-column:span 4;padding:24px}.wide{grid-column:span 8;padding:24px}.small{grid-column:span 3;padding:21px;min-height:190px}

.story-image{position:relative;min-height:280px;border-bottom:1px solid var(--line);overflow:hidden}
.gradient-space{background:radial-gradient(circle at 68% 38%,rgba(135,212,255,.28),transparent 12%),radial-gradient(circle at 58% 50%,rgba(88,120,255,.14),transparent 24%),linear-gradient(135deg,#0b111b,#111b2d 52%,#071018)}
.gradient-chip{min-height:220px;background:linear-gradient(135deg,#171b22,#0d1721 38%,#162434);border-bottom:1px solid var(--line)}
.image-tag{position:absolute;left:18px;top:18px;padding:7px 9px;border:1px solid rgba(255,255,255,.16);border-radius:999px;font-size:.68rem;font-weight:800;letter-spacing:.16em;background:rgba(6,10,14,.58);backdrop-filter:blur(10px)}
.image-orbit{position:absolute;width:320px;height:320px;border:1px solid rgba(166,221,255,.16);border-radius:50%;right:9%;top:-10%;box-shadow:0 0 0 45px rgba(255,255,255,.012),0 0 0 92px rgba(255,255,255,.007)}

.story-content{padding:26px}.compact-content{padding:20px}
.story-meta,.story-kicker-row{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#77899b;font-size:.75rem}
.story-meta{justify-content:flex-start;flex-wrap:wrap}.story-meta span+span:before{content:"•";padding-right:10px;color:#425161}
.story-card h2,.story-card h3{margin:14px 0 10px;letter-spacing:-.045em;line-height:1.04}
.story-hero h2{font-size:clamp(2rem,4.2vw,4.4rem);max-width:930px}
.tall h2,.medium h2,.wide h2{font-size:clamp(1.55rem,2.5vw,2.65rem)}.image-card h2{font-size:1.55rem}.small h3{font-size:1.25rem}
.story-card p{margin:0;color:var(--muted)}.source-line{margin-top:26px;color:#6f8191;font-size:.8rem}
.story-score{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;color:var(--mint);font-size:.76rem;font-weight:800}
.story-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.feedback-btn{border:1px solid var(--line);border-radius:999px;background:#0d131a;color:#9aabb9;padding:7px 10px;font:inherit;font-size:.75rem;cursor:pointer}
.feedback-btn:hover,.feedback-btn.selected{color:var(--text);border-color:#40546a;background:#121c26}
.quote-card blockquote{margin:18px 0 0;font-size:clamp(1.35rem,2.5vw,2.4rem);line-height:1.12;letter-spacing:-.04em;color:#e8edf1}
.resonance-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.resonance-row span{padding:6px 9px;border-radius:999px;background:#111924;color:#7f91a2;font-size:.75rem}

.explain-panel{margin-top:16px;padding:34px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,rgba(120,214,255,.04),rgba(157,242,216,.025));display:grid;grid-template-columns:.8fr 1.2fr;gap:40px}
.explain-panel h2{margin:10px 0 0;font-size:2rem}.explain-panel p{margin:0;color:var(--muted);font-size:1.02rem;line-height:1.75}

.feed-loading,.feed-empty,.feed-error{grid-column:1/-1;min-height:260px;border:1px dashed #2a3541;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:10px;color:#788997}
.loader-dot{width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 16px rgba(157,242,216,.7);animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.35}}

.feedback-note{position:fixed;right:22px;bottom:22px;z-index:50;padding:12px 14px;border:1px solid #34475a;border-radius:12px;background:#101821;color:var(--soft);box-shadow:var(--shadow);font-size:.84rem;opacity:0;transform:translateY(10px);transition:.2s ease}.feedback-note.show{opacity:1;transform:translateY(0)}

.why-dialog{width:min(560px,calc(100% - 30px));border:1px solid #334152;border-radius:20px;background:#0e141b;color:var(--text);box-shadow:0 36px 100px rgba(0,0,0,.6);padding:0}
.why-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.why-dialog form{position:relative;padding:28px}.why-dialog h2{margin:12px 40px 18px 0;font-size:1.8rem;letter-spacing:-.035em;line-height:1.08}
.why-dialog ul{margin:0;padding-left:20px;color:var(--soft)}.why-dialog li+li{margin-top:8px}.dialog-close{position:absolute;right:18px;top:16px;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:#111821;color:var(--muted);font-size:1.25rem;cursor:pointer}
.dialog-source{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);color:#718393;font-size:.82rem}

@media(max-width:900px){
  .zirflo-masthead{grid-template-columns:1fr}.brief-card{min-width:0}.feed-meta{display:none}
  .story-hero,.tall,.medium,.image-card,.quote-card,.wide{grid-column:span 12}.small{grid-column:span 6}.explain-panel{grid-template-columns:1fr}
}
@media(max-width:800px){.zirflo-page{width:min(100% - 24px,1180px)}}
@media(max-width:560px){.small{grid-column:span 12}.zirflo-masthead{padding-top:56px}.zirflo-masthead h1{font-size:4.5rem}.story-content,.tall,.medium,.quote-card,.wide{padding:20px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.story-card,.feedback-note{transition:none}.loader-dot{animation:none}}