.qstory-page { --story-green: #53e4ad; --story-cyan: #68dfe8; --story-coral: #ff9878; --story-ink: #090d14; --story-panel: rgba(14,20,29,.86); }
.qstory-page article { position: relative; }
.qstory-hero { position: relative; overflow: hidden; padding: clamp(150px, 16vw, 230px) 0 clamp(90px, 10vw, 145px); border-bottom: 1px solid rgba(255,255,255,.07); }
.qstory-hero::before { content:""; position:absolute; inset:-20% -10% 0 35%; background: radial-gradient(circle at 45% 35%, rgba(46,202,136,.22), transparent 34%), radial-gradient(circle at 70% 58%, rgba(255,117,88,.13), transparent 34%); filter: blur(12px); pointer-events:none; }
.qstory-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.03fr) minmax(400px,.97fr); gap:clamp(45px,7vw,105px); align-items:center; }
.qstory-hero-copy h1 { max-width:890px; margin:25px 0 26px; color:#fff; font-size:clamp(3.3rem,7.2vw,7.1rem); font-weight:820; line-height:.91; letter-spacing:-.065em; }
.qstory-hero-copy h1 span { color:var(--story-green); }
.qstory-hero-lead { max-width:790px; color:rgba(255,255,255,.72); font-size:clamp(1.08rem,1.65vw,1.36rem); line-height:1.68; }
.qstory-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.qstory-hero-meta { display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:30px; color:rgba(255,255,255,.46); font-size:.76rem; letter-spacing:.045em; }
.qstory-hero-meta span { position:relative; }
.qstory-hero-meta span:not(:last-child)::after { content:"·"; position:absolute; right:-13px; color:rgba(255,255,255,.26); }
.qstory-hero-device { position:relative; min-height:460px; display:flex; align-items:center; justify-content:center; }
.qstory-hero-device img { position:relative; z-index:2; width:min(100%,760px); height:auto; filter:drop-shadow(0 38px 60px rgba(0,0,0,.55)); transform:rotate(-1.4deg); }
.qstory-device-aura { position:absolute; z-index:0; width:92%; aspect-ratio:1.65; border-radius:50%; background:radial-gradient(ellipse, rgba(54,224,161,.26), rgba(70,211,225,.09) 35%, transparent 70%); filter:blur(18px); }
.qstory-device-caption { position:absolute; z-index:3; right:4%; bottom:2%; width:min(310px,62%); padding:16px 18px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(8,12,18,.72); backdrop-filter:blur(12px); box-shadow:0 18px 40px rgba(0,0,0,.28); }
.qstory-device-caption span { display:block; margin-bottom:4px; color:var(--story-green); font-size:.67rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.qstory-device-caption strong { color:#fff; font-size:.9rem; line-height:1.35; }

.qstory-opening { padding:clamp(85px,9vw,140px) 0 0; }
.qstory-reading-grid { display:grid; grid-template-columns:250px minmax(0,1fr); gap:clamp(42px,7vw,110px); align-items:start; }
.qstory-toc { position:sticky; top:105px; display:grid; gap:0; padding:22px; border:1px solid rgba(255,255,255,.08); border-radius:20px; background:rgba(10,14,21,.75); backdrop-filter:blur(16px); }
.qstory-toc > strong { margin-bottom:12px; color:#fff; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.qstory-toc a { display:grid; grid-template-columns:30px 1fr; gap:8px; padding:9px 0; color:rgba(255,255,255,.56); font-size:.75rem; line-height:1.32; text-decoration:none; border-top:1px solid rgba(255,255,255,.04); }
.qstory-toc a span { color:var(--story-green); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.68rem; }
.qstory-toc a:hover { color:#fff; }
.qstory-prose { min-width:0; max-width:1040px; }
.qstory-prose > * { scroll-margin-top:110px; }
.qstory-thesis { padding-bottom:55px; }
.qstory-thesis h2 { max-width:950px; margin:18px 0 26px; color:#fff; font-size:clamp(2.35rem,5vw,4.9rem); line-height:1; letter-spacing:-.055em; }
.qstory-thesis > p:last-child { max-width:890px; margin:0; color:rgba(255,255,255,.66); font-size:1.06rem; line-height:1.8; }
.qstory-metrics { display:grid; grid-template-columns:repeat(4,1fr); margin:0 0 70px; border:1px solid rgba(255,255,255,.08); border-radius:24px; overflow:hidden; background:#101820; }
.qstory-metrics div { min-height:140px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:22px; text-align:center; border-right:1px solid rgba(255,255,255,.07); }
.qstory-metrics div:last-child { border-right:0; }
.qstory-metrics strong { color:var(--story-green); font-size:clamp(2rem,3vw,3rem); line-height:1; }
.qstory-metrics span { color:rgba(255,255,255,.63); font-size:.76rem; line-height:1.4; }

.qstory-timeline { margin:0 0 105px; padding:30px; border:1px solid rgba(255,255,255,.08); border-radius:24px; background:rgba(255,255,255,.025); }
.qstory-timeline figcaption { display:flex; flex-direction:column; gap:4px; margin-bottom:24px; }
.qstory-timeline figcaption strong { color:#fff; font-size:1.18rem; }
.qstory-timeline figcaption span { color:rgba(255,255,255,.52); font-size:.78rem; }
.qstory-months { display:grid; grid-template-columns:repeat(8,1fr); padding-left:0; margin-bottom:9px; color:rgba(255,255,255,.35); font-size:.65rem; text-align:center; }
.qstory-track { position:relative; height:39px; margin:5px 0; border-radius:9px; background:repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1px), rgba(255,255,255,.05) calc(12.5% - 1px), rgba(255,255,255,.05) 12.5%); }
.qstory-bar { position:absolute; top:4px; height:31px; display:flex; align-items:center; padding:0 11px; border-radius:8px; overflow:hidden; white-space:nowrap; color:#fff; font-size:.65rem; font-weight:760; letter-spacing:.01em; box-shadow:0 8px 18px rgba(0,0,0,.16); }
.qstory-bar--standalone { left:0; width:85%; background:#456c80; }
.qstory-bar--saas { left:25%; width:75%; background:#259d69; }
.qstory-bar--device1 { left:31%; width:28%; background:#7a5aba; }
.qstory-bar--device2 { left:65%; width:31%; background:#624fae; }
.qstory-bar--lcd { left:83%; width:17%; background:linear-gradient(90deg,#d27b53,#ed6754); }
.qstory-figure-note { margin:18px 0 0; color:rgba(255,255,255,.48); font-size:.73rem; line-height:1.55; }

.qstory-chapter { padding:0 0 clamp(95px,10vw,150px); }
.qstory-chapter-head { display:grid; grid-template-columns:minmax(140px,.28fr) minmax(0,1fr); gap:26px; align-items:start; padding-top:8px; border-top:1px solid rgba(255,255,255,.11); }
.qstory-chapter-head > span { padding-top:18px; color:var(--story-green); font-size:.69rem; font-weight:820; letter-spacing:.11em; line-height:1.5; text-transform:uppercase; }
.qstory-chapter-head h2 { margin:12px 0 30px; color:#fff; font-size:clamp(2.35rem,5.4vw,5.25rem); line-height:.98; letter-spacing:-.055em; }
.qstory-prose .qstory-chapter > p, .qstory-prose .qstory-chapter > h3, .qstory-epilogue > p, .qstory-source-note > p { max-width:830px; }
.qstory-chapter p, .qstory-epilogue p, .qstory-source-note p { color:rgba(255,255,255,.67); font-size:1rem; line-height:1.85; }
.qstory-chapter p + p { margin-top:18px; }
.qstory-chapter .qstory-intro { color:rgba(255,255,255,.88); font-size:clamp(1.15rem,1.8vw,1.4rem); line-height:1.68; }
.qstory-chapter h3 { margin:45px 0 14px; color:#fff; font-size:clamp(1.55rem,3vw,2.25rem); letter-spacing:-.035em; }
.qstory-chapter code, .qstory-source-note code { padding:.08em .35em; border:1px solid rgba(255,255,255,.08); border-radius:6px; color:#c6f8e4; background:rgba(255,255,255,.045); font-size:.85em; }

.qstory-photo { margin:45px 0; }
.qstory-photo img { display:block; width:100%; height:auto; border-radius:24px; border:1px solid rgba(255,255,255,.08); }
.qstory-photo--team { max-width:720px; }
.qstory-photo--team img { max-height:650px; object-fit:cover; object-position:center 32%; }
.qstory-photo figcaption, .qstory-ui-proof figcaption, .qstory-device-proof figcaption { margin-top:13px; color:rgba(255,255,255,.45); font-size:.75rem; line-height:1.55; font-style:italic; }
.qstory-principle, .qstory-pattern { margin:40px 0; padding:27px 30px; border:1px solid rgba(83,228,173,.18); border-radius:20px; background:linear-gradient(135deg, rgba(83,228,173,.075), rgba(104,223,232,.025)); }
.qstory-principle > span, .qstory-pattern > span { display:block; margin-bottom:8px; color:var(--story-green); font-size:.69rem; font-weight:820; letter-spacing:.12em; text-transform:uppercase; }
.qstory-principle strong, .qstory-pattern strong { display:block; color:#fff; font-size:clamp(1.28rem,2.4vw,1.85rem); line-height:1.35; }
.qstory-principle p, .qstory-pattern p { margin:10px 0 0; color:rgba(255,255,255,.62); font-size:.9rem; line-height:1.7; }
.qstory-pattern--edge { border-color:rgba(255,152,120,.2); background:linear-gradient(135deg, rgba(255,152,120,.08), rgba(255,255,255,.02)); }
.qstory-pattern--edge > span { color:var(--story-coral); }
.qstory-fossil { display:flex; flex-direction:column; gap:5px; margin:35px 0; padding-left:20px; border-left:3px solid var(--story-coral); }
.qstory-fossil strong { color:#fff; font-size:1.25rem; }
.qstory-fossil span { color:rgba(255,255,255,.55); font-size:.84rem; line-height:1.6; }

.qstory-architecture { display:grid; grid-template-columns:minmax(0,.75fr) 40px minmax(0,1.1fr) minmax(0,.95fr); gap:16px; align-items:center; margin:40px 0; padding:28px; border:1px solid rgba(255,255,255,.08); border-radius:24px; background:#f5f6f7; color:#111922; }
.qstory-node { min-height:150px; padding:18px; border:1px solid rgba(14,25,34,.11); border-radius:15px; background:white; box-shadow:0 8px 22px rgba(13,26,37,.06); }
.qstory-node small { display:block; margin-bottom:12px; color:#49606e; font-size:.65rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.qstory-node strong { display:block; font-size:.92rem; line-height:1.35; }
.qstory-node p { margin:8px 0 0!important; color:#677680!important; font-size:.7rem!important; line-height:1.5!important; }
.qstory-node--guest { border-left:4px solid #5ab2ef; }
.qstory-node--core { border-left:4px solid #3acb94; }
.qstory-node--receiver { border-left:4px solid #e6b348; }
.qstory-node--admin { border-left:4px solid #e67f69; }
.qstory-arrow { color:#738590; font-size:2rem; text-align:center; }
.qstory-branch { display:grid; gap:12px; }
.qstory-branch .qstory-node { min-height:0; }

.qstory-tenant-map { margin:42px 0; padding:30px; border-radius:24px; background:#f5f6f7; color:#121b22; }
.qstory-tenant-pill { width:max-content; max-width:100%; margin:0 auto 26px; padding:10px 24px; border:1px solid #bfe8d7; border-radius:999px; background:#e4f8ef; color:#17805a; font-size:.72rem; font-weight:800; letter-spacing:.05em; }
.qstory-tenant-surfaces { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.qstory-tenant-surfaces > div { min-height:105px; padding:16px; border:1px solid #dbe1e5; border-radius:13px; background:#fff; }
.qstory-tenant-surfaces strong, .qstory-tenant-surfaces span { display:block; }
.qstory-tenant-surfaces strong { margin-bottom:7px; font-size:.78rem; }
.qstory-tenant-surfaces span { color:#697781; font-size:.66rem; line-height:1.45; }
.qstory-tenant-core { max-width:580px; margin:28px auto 0; padding:18px 22px; border-left:4px solid #3d7287; border-radius:12px; background:#fff; box-shadow:0 8px 20px rgba(16,31,42,.05); }
.qstory-tenant-core strong, .qstory-tenant-core span { display:block; }
.qstory-tenant-core span { margin-top:6px; color:#6c7982; font-size:.7rem; }

.qstory-ui-proof { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(150px,.55fr); gap:14px; margin:50px 0; padding:18px; border-radius:24px; background:#0c1118; border:1px solid rgba(255,255,255,.08); }
.qstory-ui-proof img { display:block; width:100%; height:100%; object-fit:cover; border-radius:14px; }
.qstory-ui-main { min-height:380px; }
.qstory-ui-side { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.qstory-ui-side img { object-position:top; }
.qstory-ui-proof figcaption { grid-column:1/-1; margin:0; padding:4px 4px 0; }
.qstory-service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:42px 0; }
.qstory-service-grid > div { min-height:190px; padding:23px; border:1px solid rgba(255,255,255,.08); border-radius:19px; background:rgba(255,255,255,.026); }
.qstory-service-grid span { display:block; margin-bottom:24px; color:var(--story-green); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.7rem; }
.qstory-service-grid strong { display:block; color:#fff; font-size:1rem; }
.qstory-service-grid p { margin:9px 0 0!important; color:rgba(255,255,255,.53)!important; font-size:.78rem!important; line-height:1.58!important; }

.qstory-refresh { display:grid; grid-template-columns:1fr 52px 1fr; gap:14px; align-items:center; margin:42px 0; padding:24px; border-radius:24px; background:#f5f6f7; color:#111922; }
.qstory-refresh-card { min-height:260px; padding:23px; border-radius:17px; background:#111a22; color:#fff; }
.qstory-refresh-card > strong { font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; }
.qstory-refresh-card > p { margin:17px 0 0!important; color:rgba(255,255,255,.55)!important; font-size:.72rem!important; line-height:1.55!important; }
.qstory-pixels { display:grid; gap:7px; margin-top:25px; }
.qstory-pixels i { height:16px; border-radius:2px; background:#243541; }
.qstory-pixels i.is-hot { background:#4de1a8; box-shadow:0 0 0 1px rgba(77,225,168,.22); }
.qstory-pixels--damage i.is-hot { outline:2px solid #7bf1c4; outline-offset:4px; }
.qstory-refresh-arrow { color:#72818b; font-size:2rem; text-align:center; }
.qstory-device-proof { margin:45px 0 0; }
.qstory-device-proof img { display:block; width:min(100%,800px); height:auto; margin:0 auto; filter:drop-shadow(0 25px 45px rgba(0,0,0,.36)); }

.qstory-invariants { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:45px; }
.qstory-invariants article { min-height:230px; padding:27px; border:1px solid rgba(255,255,255,.08); border-radius:20px; background:rgba(255,255,255,.026); }
.qstory-invariants article:last-child { grid-column:1/-1; min-height:0; }
.qstory-invariants span { display:block; margin-bottom:30px; color:var(--story-green); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; }
.qstory-invariants h3 { margin:0 0 11px; color:#fff; font-size:1.25rem; }
.qstory-invariants p { margin:0!important; color:rgba(255,255,255,.55)!important; font-size:.83rem!important; line-height:1.65!important; }
.qstory-epilogue { margin-bottom:110px; padding:clamp(38px,5vw,65px); border:1px solid rgba(83,228,173,.17); border-radius:28px; background:linear-gradient(145deg,rgba(34,95,74,.18),rgba(255,255,255,.02)); }
.qstory-epilogue h2, .qstory-source-note h2 { margin:12px 0 25px; color:#fff; font-size:clamp(2.2rem,4.5vw,4.4rem); line-height:1; letter-spacing:-.05em; }
.qstory-epilogue blockquote { margin:36px 0; padding:0 0 0 26px; border-left:3px solid var(--story-green); color:#fff; font-size:clamp(1.45rem,3.2vw,2.5rem); font-weight:730; line-height:1.35; letter-spacing:-.03em; }
.qstory-source-note { margin-bottom:30px; padding:34px; border:1px solid rgba(255,255,255,.08); border-radius:24px; background:rgba(255,255,255,.023); }
.qstory-source-note h2 { font-size:clamp(1.9rem,3.5vw,3rem); }
.qstory-source-stats { display:flex; flex-wrap:wrap; gap:10px; margin-top:25px; }
.qstory-source-stats span { padding:10px 13px; border:1px solid rgba(255,255,255,.08); border-radius:999px; color:rgba(255,255,255,.58); font-size:.72rem; }
.qstory-source-stats strong { color:#fff; }
.qstory-final { margin-top:110px; }

@media (max-width: 1100px) {
    .qstory-hero-grid { grid-template-columns:1fr; }
    .qstory-hero-device { min-height:390px; }
    .qstory-reading-grid { grid-template-columns:1fr; }
    .qstory-toc { position:relative; top:auto; grid-template-columns:repeat(2,1fr); column-gap:18px; }
    .qstory-toc > strong { grid-column:1/-1; }
    .qstory-architecture { grid-template-columns:1fr; }
    .qstory-arrow { transform:rotate(90deg); }
    .qstory-tenant-surfaces { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 760px) {
    .qstory-page { overflow-x:clip; }
    .qstory-hero { padding:108px 0 76px; }
    .qstory-hero-grid { gap:40px; }
    .qstory-hero-copy h1 { margin-top:20px; font-size:clamp(2.8rem,13.5vw,4.2rem); line-height:.94; letter-spacing:-.055em; }
    .qstory-hero-lead { font-size:1rem; line-height:1.65; }
    .qstory-hero-actions { gap:9px; }
    .qstory-hero-actions .mkt-btn { justify-content:center; }
    .qstory-hero-device {
        min-height:0;
        display:grid;
        grid-template-columns:minmax(0,1fr);
        align-items:start;
        justify-items:stretch;
        overflow:visible;
    }
    .qstory-hero-device img { width:100%; max-width:none; transform:none; }
    .qstory-device-aura { top:5%; left:5%; width:90%; }
    .qstory-device-caption {
        position:relative;
        inset:auto;
        justify-self:end;
        width:calc(100% - 18px);
        max-width:none;
        margin-top:-26px;
        box-sizing:border-box;
    }
    .qstory-hero-meta { display:grid; gap:7px; }
    .qstory-hero-meta span::after { display:none; }
    .qstory-opening { padding-top:76px; }
    .qstory-reading-grid { gap:58px; }
    .qstory-toc { grid-template-columns:1fr; }
    .qstory-thesis { padding-bottom:42px; }
    .qstory-thesis h2 { font-size:clamp(2.25rem,10.5vw,3.55rem); line-height:1.01; letter-spacing:-.05em; }
    .qstory-thesis > p:last-child { font-size:.98rem; line-height:1.72; }
    .qstory-metrics { grid-template-columns:repeat(2,1fr); margin-bottom:58px; }
    .qstory-metrics div:nth-child(2) { border-right:0; }
    .qstory-metrics div:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.07); }
    .qstory-timeline { margin-bottom:82px; padding:20px 14px; overflow:hidden; }
    .qstory-months { font-size:.56rem; }
    .qstory-bar { padding:0 7px; font-size:.53rem; }
    .qstory-chapter { padding-bottom:82px; }
    .qstory-chapter-head { grid-template-columns:1fr; gap:0; }
    .qstory-chapter-head h2 { margin-top:8px; font-size:clamp(2.2rem,10.7vw,3.6rem); line-height:1; }
    .qstory-chapter p, .qstory-epilogue p, .qstory-source-note p { line-height:1.72; }
    .qstory-photo--team img { max-height:480px; }
    .qstory-principle, .qstory-pattern { margin:32px 0; padding:22px 20px; }
    .qstory-architecture, .qstory-tenant-map, .qstory-refresh { margin-inline:0; padding:16px; }
    .qstory-tenant-surfaces, .qstory-service-grid, .qstory-invariants { grid-template-columns:1fr; }
    .qstory-invariants article:last-child { grid-column:auto; }
    .qstory-ui-proof { grid-template-columns:1fr; padding:12px; }
    .qstory-ui-main { min-height:240px; }
    .qstory-ui-side { grid-template-columns:1fr 1fr; min-height:330px; }
    .qstory-refresh { grid-template-columns:1fr; }
    .qstory-refresh-arrow { transform:rotate(90deg); }
    .qstory-epilogue, .qstory-source-note { padding:28px 22px; }
}
@media (max-width: 480px) {
    .qstory-hero { padding-top:94px; }
    .qstory-hero-copy h1 { font-size:clamp(2.65rem,13vw,3.75rem); }
    .qstory-hero-actions { display:grid; grid-template-columns:1fr; }
    .qstory-hero-actions .mkt-btn { width:100%; }
    .qstory-device-caption { width:calc(100% - 12px); margin-top:-20px; padding:14px 15px; }
    .qstory-metrics { grid-template-columns:1fr; }
    .qstory-metrics div { min-height:116px; border-right:0; border-bottom:1px solid rgba(255,255,255,.07); }
    .qstory-metrics div:last-child { border-bottom:0; }
    .qstory-timeline { margin-inline:-2px; }
    .qstory-bar { font-size:.49rem; }
    .qstory-tenant-surfaces { grid-template-columns:1fr; }
    .qstory-ui-side { min-height:260px; }
    .qstory-service-grid > div { min-height:0; }
    .qstory-invariants article { min-height:0; }
    .qstory-source-stats { display:grid; grid-template-columns:1fr; }
    .qstory-source-stats span { width:100%; }
}
@media (prefers-reduced-motion: reduce) {
    .qstory-hero-device img { transform:none; }
}