:root {color-scheme:dark; --bg:#0d0e14;--ink:#f7f5f0;--muted:#aeafbf;--soft:#787a8f;--line:rgba(255,255,255,.12);--card:#191924;--mint:#c7f6a7;--safe-bottom:env(safe-area-inset-bottom,0px);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
    * {box-sizing:border-box} html,body {margin:0;min-height:100%;background:var(--bg);color:var(--ink)}
    button,input,textarea,select {font:inherit}button{cursor:pointer}a{color:inherit}
    button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #b8a6ff;outline-offset:3px}
    #app {min-height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(circle at 12% 4%,rgba(119,95,188,.12),transparent 27%),var(--bg)}
    header {height:75px;display:flex;align-items:center;justify-content:space-between;padding:14px max(22px,calc((100vw - 1160px)/2));gap:16px;z-index:4;position:relative}
    .brand {display:flex;align-items:center;gap:10px;border:0;background:transparent;color:#fff;font-size:23px;letter-spacing:-1.5px;font-weight:850;padding:0}.mark{height:32px;width:32px;border-radius:11px;background:#e0d2ff;display:grid;place-items:center;color:#241535;font-size:23px;font-weight:1000;transform:rotate(-8deg)}
    .header-right{display:flex;align-items:center;gap:8px}.tiny-state {font-size:12px;color:#a1a0ae;margin-right:10px}.round,.icon-btn{display:grid;place-items:center;border-radius:50%;height:41px;width:41px;border:1px solid var(--line);background:#24232f;color:#f8f7fb;font-size:18px}
    .round:hover,.icon-btn:hover {background:#302f41}.pill {padding:8px 13px;border-radius:30px;border:1px solid var(--line);background:#22212c;font-size:12px;color:#e3e0ef}
    .screen {flex:1;min-height:0;display:flex;justify-content:center;width:100%;padding:0 20px 110px}
    .screen-content {width:min(100%,1100px);display:grid;grid-template-columns:1fr minmax(0,505px) 1fr;gap:28px;align-items:center;min-height:calc(100dvh - 190px)}
    .rail{padding:20px 0;display:flex;flex-direction:column;gap:20px;max-width:280px;align-self:center}.rail.right{justify-self:end}.eyebrow{font-weight:750;color:#a7a6b8;font-size:10px;letter-spacing:2.4px;text-transform:uppercase}.rail h2{font-size:clamp(27px,3vw,39px);line-height:1.12;letter-spacing:-1.8px;margin:12px 0}.rail p{color:#a9a8b6;line-height:1.5;font-size:14px}.rail strong{color:#f6f4ff}.rail-stat{border-left:2px solid #a28bfe;padding:8px 0 8px 15px}.rail-stat b{font-size:30px;letter-spacing:-1px;display:block}.rail-stat span{font-size:12px;color:#a5a3b2}
    .rail-panel {padding:18px;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:18px}.rail-panel small {font-size:11px;color:var(--muted)}.rail-panel h4{font-size:16px;line-height:1.35;margin:9px 0}.rail-panel button{border:0;background:transparent;color:#e2c1ff;font-weight:700;font-size:12px;padding:0}.hotkey{color:#878594;font-size:12px;line-height:1.75}
    .feed-column {display:flex;flex-direction:column;gap:10px;width:100%;min-width:0}.feed-top{display:flex;align-items:center;justify-content:space-between;padding:0 3px;min-height:25px}.feed-top span{font-size:10px;letter-spacing:1.4px;color:#b1b0c1;font-weight:750;text-transform:uppercase}.feed-top b{font-size:11px;font-weight:650;color:#9997ad}
    .feature {height:min(690px,calc(100dvh - 180px));min-height:490px;border:1px solid rgba(255,255,255,.15);border-radius:25px;position:relative;overflow:hidden;background:#1b1a2b;isolation:isolate;box-shadow:0 18px 70px #0009;display:flex;flex-direction:column;justify-content:space-between;touch-action:pan-x;}
    .feature.purple{--g1:#392870;--g2:#1b1937;--accent:#d1b9ff}.feature.magenta{--g1:#65254f;--g2:#221b31;--accent:#ffafd8}.feature.blue{--g1:#173e74;--g2:#1b203d;--accent:#a6d6ff}.feature.teal{--g1:#144b51;--g2:#162d35;--accent:#aeffde}.feature.orange{--g1:#703c27;--g2:#302032;--accent:#ffd3a1}.feature.gold{--g1:#594927;--g2:#242332;--accent:#ffe49e}
    .feature:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--g2) 0%,#171622 64%,#15151f 100%);z-index:-2}
    .feature:after{content:"";inset:0;position:absolute;background:linear-gradient(180deg,transparent 42%,rgba(10,10,18,.15) 72%,rgba(9,9,17,.3) 100%);z-index:-1;pointer-events:none}
    .feature-top {padding:23px 25px;display:flex;align-items:center;justify-content:space-between;gap:10px;z-index:1}.category{border:1px solid #ffffff47;padding:8px 11px;border-radius:25px;display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;background:#ffffff12;backdrop-filter:blur(12px)}.category i{width:7px;height:7px;border-radius:50%;background:var(--accent)}
    .type-label{font-size:11px;color:#eee9fa;opacity:.8}
    .feature-content{padding:0 25px 12px;position:relative;z-index:1}.tagline {font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--accent);display:flex;gap:8px;align-items:center}.tagline:before{content:"";display:block;width:17px;height:2px;background:var(--accent)}
    .feature h1 {font-size:clamp(33px,4vw,46px);line-height:1.07;letter-spacing:-1.7px;margin:13px 0 13px;text-wrap:balance;max-width:475px}.feature .hook{font-size:15px;line-height:1.5;max-width:410px;color:#e6dfef;margin:0 0 15px}
    .microfact{display:flex;align-items:flex-start;gap:9px;border-top:1px solid #ffffff38;padding-top:14px;font-size:12px;color:#c5c3d6;line-height:1.43}.microfact strong{color:var(--accent);font-weight:800;white-space:nowrap}.twist-toggle{border:0;background:transparent;color:var(--accent);text-align:left;font-weight:800;font-size:12px;line-height:1.4;padding:0;text-decoration:underline;text-underline-offset:3px}
    .feature-actions{display:flex;gap:8px;align-items:center;padding:15px 23px 22px;position:relative;z-index:2}.main-act{background:#f6f1ff;color:#1b1626;border-radius:12px;border:0;padding:13px 15px;font-size:13px;font-weight:800;flex:1}.main-act:hover{background:#dcd1fd}.tool{border:1px solid #ffffff42;background:#ffffff14;border-radius:12px;min-height:43px;min-width:43px;padding:0 11px;font-size:18px;color:#fff;display:grid;place-items:center}.tool.active{background:#ddccff;color:#1a1630;border-color:#ddccff}.arrow-small{font-size:17px}
    .swipe-help {display:flex;align-items:center;justify-content:space-between;padding:0 5px;color:#9190a0;font-size:11px;line-height:1.35}.swipe-help button{color:#b6b3c8;background:transparent;border:0;padding:5px;font-size:11px}.hint-swipe{display:inline-flex;align-items:center;gap:6px}
    .bottom-nav{display:flex;gap:6px;align-items:center;justify-content:space-around;width:min(100%,530px);height:70px;bottom:calc(9px + var(--safe-bottom));left:50%;transform:translateX(-50%);position:fixed;background:rgba(30,29,41,.97);border:1px solid #ffffff1d;box-shadow:0 11px 45px #000b;border-radius:23px;padding:8px;z-index:15;backdrop-filter:blur(20px)}
    .nav-btn {border:0;background:transparent;color:#aaa9ba;border-radius:14px;flex:1;padding:6px 3px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:700;min-height:51px}.nav-btn .nav-glyph{font-size:20px;line-height:22px}.nav-btn.selected{background:#d2c4ff;color:#29233b}
    .panel-screen{width:min(100%,900px);padding:14px 0 20px;margin:0 auto;overflow-y:auto;max-height:calc(100dvh - 175px)}.panel-screen h1{font-size:34px;letter-spacing:-1.25px;line-height:1.1;margin:13px 0 8px}.panel-screen .lead{color:#ada9bb;font-size:14px;line-height:1.6;max-width:650px}.panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:24px}
    .list-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.list-card{border:1px solid #ffffff1e;background:linear-gradient(140deg,#27243a,#1b1b28);border-radius:18px;padding:17px;text-align:left;color:#fff;min-height:155px;display:flex;flex-direction:column;justify-content:space-between}.list-card small{color:#bdb6cb;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;font-weight:800}.list-card strong{font-size:17px;line-height:1.22;letter-spacing:-.4px}.list-card span{font-size:11px;color:#b7afc1}.note-text{font-size:13px;color:#c8c4d7;line-height:1.5;padding-top:12px;border-top:1px solid #ffffff20;margin-top:13px}
    .empty{border:1px dashed #ffffff30;border-radius:20px;padding:37px 26px;color:#b9b7c7;line-height:1.65;background:#ffffff05}.empty strong{display:block;color:#fff;font-size:19px;margin-bottom:5px}.small-primary{background:#d4c6ff;color:#221b31;padding:10px 15px;border-radius:10px;border:0;font-weight:750;font-size:12px}.subbtn{padding:10px 13px;color:#eeeafb;border:1px solid #ffffff37;background:#ffffff13;border-radius:10px;font-weight:650;font-size:12px}.tools-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
    .filter-row{display:flex;gap:8px;overflow-x:auto;padding:0 0 15px;scrollbar-width:none}.filter-chip{white-space:nowrap;border:1px solid #ffffff29;border-radius:30px;padding:9px 13px;color:#d1cedf;background:#ffffff0b;font-size:12px}.filter-chip.on{background:#d8c7ff;color:#1b1831}
    .lesson{border:1px solid #ffffff25;border-radius:22px;background:#21202e;padding:24px;margin:16px 0}.lesson .question{font-size:clamp(23px,4vw,30px);letter-spacing:-.7px;line-height:1.23;margin:12px 0 16px}.lesson label{font-size:12px;font-weight:800;color:#c1b6dc}.lesson textarea,.promptbox{resize:vertical;width:100%;border:1px solid #ffffff3b;border-radius:12px;background:#100f1c;color:#fff;padding:14px;line-height:1.45;min-height:118px;margin-top:10px;outline:none}.lesson textarea:focus,.promptbox:focus{border-color:#cfc0ff}.feedback{margin-top:12px;font-size:13px;color:#c5f0c5;line-height:1.5}
    .topic-group{border:1px solid #ffffff25;border-radius:16px;margin-bottom:13px;overflow:hidden;background:#1b1a27}.topic-head{display:flex;align-items:center;justify-content:space-between;padding:15px 17px;font-weight:800;gap:10px}.topic-head span{font-size:12px;color:#a7a4b6;font-weight:600}.topic-link{display:block;border-top:1px solid #ffffff15;padding:13px 17px;color:#e8e6f0;font-size:13px;background:#171724;cursor:pointer}.topic-link:hover{background:#2a263e}.topic-link small{display:block;color:#9896a8;margin-top:4px}
    #modal{position:fixed;inset:0;background:#05040dc9;display:none;z-index:30;align-items:flex-end;justify-content:center;backdrop-filter:blur(10px)}#modal.open{display:flex}.sheet{width:min(100%,680px);max-height:min(94dvh,880px);overflow-y:auto;overscroll-behavior:contain;border:1px solid #ffffff3a;border-radius:25px 25px 0 0;background:#1a1925;box-shadow:0 -16px 60px #0009;padding:14px 22px calc(25px + var(--safe-bottom))}.handle{height:5px;width:39px;border-radius:5px;background:#666273;margin:1px auto 12px}.sheet-top{display:flex;justify-content:space-between;align-items:center}.sheet-headline{font-size:25px;line-height:1.13;letter-spacing:-.8px;margin:16px 0 8px}.section{padding:16px 0;border-bottom:1px solid #ffffff1d}.section-label{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:#baaaf4;font-weight:850;margin-bottom:7px}.section p{font-size:14px;line-height:1.57;color:#dbd9e5;margin:5px 0}.paperline{color:#a7a3b9;font-size:12px;line-height:1.5}.paperline a{color:#d5beff;text-decoration:underline;text-underline-offset:3px}.source-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.source-row a{text-decoration:none}.sheet-footer{display:flex;gap:9px;align-items:center;margin-top:18px}.sheet-footer button{flex:1}.think-field{margin-top:11px;display:flex;flex-direction:column;gap:8px}.think-field label{color:#ded3f6;font-size:12px;font-weight:700}.think-field textarea{background:#11101b;color:#fff;border:1px solid #ffffff32;border-radius:12px;padding:13px;min-height:106px;resize:vertical}.think-actions{display:flex;gap:9px;flex-wrap:wrap}.reveal-box{border-radius:13px;padding:14px;background:#2b273b;color:#e9deff;font-size:13px;line-height:1.55;margin-top:10px}
    .live-pill{font-size:10px;color:#a3e7c7;border:1px solid #50786770;border-radius:99px;padding:4px 7px;margin-left:6px;white-space:nowrap}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid #ffffff1c}.settings-row span{font-size:13px;color:#e3dfef}.settings-row select{border:1px solid #ffffff33;border-radius:9px;background:#302c41;color:#fff;font-size:12px;padding:8px;max-width:150px}.alert{position:fixed;left:50%;bottom:calc(95px + var(--safe-bottom));transform:translateX(-50%);padding:13px 20px;border-radius:25px;background:#e4dbff;color:#251b38;font-weight:800;font-size:12px;box-shadow:0 10px 30px #000a;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw;text-align:center}.alert.show{opacity:1}
    @media(max-width:940px){.screen-content{grid-template-columns:minmax(0,505px);justify-content:center;gap:0}.rail{display:none}.screen {padding:0 12px 102px}.feature{height:calc(100dvh - 196px);max-height:780px;min-height:440px}}
    @media(max-width:480px){header{height:64px;padding:10px 17px}.brand{font-size:22px}.mark{width:30px;height:30px}.tiny-state{display:none}.screen{padding:0 10px calc(94px + var(--safe-bottom))}.screen-content{min-height:0}.feed-column{gap:6px}.feature{height:calc(100dvh - 177px - var(--safe-bottom));min-height:435px;border-radius:22px}.feature-top{padding:17px 17px}.feature-content{padding:0 19px 5px}.feature h1{font-size:clamp(31px,8.8vw,42px);letter-spacing:-1.5px;line-height:1.07}.feature .hook{font-size:14px;line-height:1.45}.feature-actions{padding:13px 18px 17px}.microfact{font-size:11px;gap:6px}.bottom-nav{width:calc(100% - 20px);border-radius:20px}.swipe-help{font-size:10px}.panel-screen{max-height:calc(100dvh - 175px)}.list-cards{grid-template-columns:1fr}.panel-screen h1{font-size:29px}.sheet{padding-left:17px;padding-right:17px}}
    @media(max-height:690px){.feature{min-height:395px;height:calc(100dvh - 153px - var(--safe-bottom))}.feature h1{font-size:30px}.feature .hook{font-size:13px}.microfact{display:none}.feature-top{padding-top:12px}.feature-actions{padding-bottom:12px}header{height:58px}.screen{padding-bottom:88px}}
    @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
  <style>

/* RIFT 3: FUN, ANALOG-INSPIRED EDITORIAL SYSTEM · no decorative graphics behind text */
:root {color-scheme:light; --bg:#f7f1e7;--ink:#242321;--muted:#55514c;--soft:#767169;--line:#24232133;--card:#fffbf4;--mint:#d5ee83;--safe-bottom:env(safe-area-inset-bottom,0px);font-family:"DM Sans","Trebuchet MS",system-ui,sans-serif;}
html, body {color:var(--ink);background:var(--bg)}
body {letter-spacing:-.1px}
#app {background:#f7f1e7}
#app:before {content:"";height:8px;position:absolute;top:0;left:0;width:100%;background:linear-gradient(90deg,#ff745f 0% 25%,#d9ed81 25% 50%,#a3d7fc 50% 75%,#d2acfc 75% 100%);z-index:8;pointer-events:none}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {outline:3px solid #e96d57;outline-offset:3px}
header{padding-top:19px}
.brand{color:#242321;font-size:26px;letter-spacing:-1.9px;font-weight:800;transition:transform .22s ease}
.brand:hover{transform:rotate(-2deg)}
.brand .mark{background:#ff775e;color:#242321;border:2px solid #242321;border-radius:12px;font-family:"Fraunces",Georgia,serif;font-weight:750;transform:rotate(-11deg);box-shadow:3px 3px 0 #242321}
.brand span:last-child{color:#615b56!important;letter-spacing:-.3px!important;font-size:11px!important;font-weight:650!important}
.tiny-state {color:#726b62;font-weight:650}
.round,.icon-btn {background:#fffdfa;color:#242321;border:2px solid #242321;box-shadow:2px 3px 0 #242321;transition:transform .2s cubic-bezier(.2,1.5,.4,1),box-shadow .2s ease,background .2s}
.round:first-of-type{background:#d8ec86}
.round:hover,.icon-btn:hover{background:#ffdb8d;transform:translateY(-3px) rotate(-5deg);box-shadow:3px 5px 0 #242321}
.round:active,.icon-btn:active{transform:translateY(2px) scale(.94);box-shadow:0 0 0 #242321}
.screen{padding-bottom:112px}
.eyebrow,.feed-top span{color:#34312e;letter-spacing:1.7px;font-weight:800}
.rail h2{color:#242321;font-family:"Fraunces",Georgia,serif;font-size:clamp(29px,3.25vw,43px);letter-spacing:-2px;line-height:1.06;font-weight:750}
.rail h2 em{font-style:italic;color:#e65d45}
.rail p,.rail-stat span,.hotkey {color:#514d48}
.rail strong{color:var(--ink)}
.rail-stat{border-left:4px solid #f37662}.rail-stat b{color:#242321}.rail-stat b span{color:#d8503b!important}
.rail-panel{border:2px solid #252421;background:#fff7e9;border-radius:18px;box-shadow:4px 4px 0 #242321}
.rail-panel:first-child{background:#d9ec9b}.rail-panel:nth-child(2){background:#c3e8f8}
.rail-panel small{color:#393831}.rail-panel h4{color:#242321;font-family:"Fraunces",Georgia,serif;font-weight:650;font-size:18px;line-height:1.25}
.rail-panel button{color:#292520;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.feed-top b{color:#3a3732;font-weight:800;font-variant-numeric:tabular-nums}
.live-pill{color:#225345;border:1.5px solid #2b745c;background:#d5f5e5;font-weight:800}
.feature{background:var(--paper,#e8d6f5);border:2px solid #252421;border-radius:24px;box-shadow:7px 8px 0 #252421;overflow:hidden;touch-action:pan-x;transition:box-shadow .22s ease;}
.feature.purple{--paper:#ead7fa;--accent:#7845a5;--sticker:#fcf39f}
.feature.magenta{--paper:#ffdaea;--accent:#b93975;--sticker:#ffd77e}
.feature.blue{--paper:#cce7fe;--accent:#2264a2;--sticker:#f8d8c3}
.feature.teal{--paper:#c8efe0;--accent:#176c5a;--sticker:#ffd49e}
.feature.orange{--paper:#ffe1c1;--accent:#a65332;--sticker:#d9f08f}
.feature.gold{--paper:#f7e8a3;--accent:#806117;--sticker:#cbe9fa}
.feature:before,.feature:after{display:none!important}
.feature-top{padding:24px 25px 10px;z-index:1}
.category{background:#fffaf0;border:2px solid #292521;color:#242321;padding:8px 12px;font-size:10px;font-weight:800;letter-spacing:.8px;box-shadow:2px 3px 0 #242321;backdrop-filter:none;max-width:62%}
.category i{background:var(--accent);width:9px;height:9px;flex-shrink:0}
.type-label{color:#33302b;opacity:1;font-weight:700;font-size:11px;white-space:nowrap}
.feature-content{padding:16px 26px;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;z-index:1}
.tagline{color:var(--accent);font-size:11px;letter-spacing:1.6px;font-weight:800}
.tagline:before{background:var(--accent);width:19px;height:3px}
.feature h1{color:#252320;font-family:"Fraunces",Georgia,serif;font-weight:750;letter-spacing:-1.8px;font-size:clamp(34px,3.9vw,50px);line-height:1.065;margin:16px 0 14px;max-width:510px;text-wrap:balance}
.feature .hook{color:#332d2a;font-size:15px;line-height:1.5;max-width:480px;font-weight:550;margin:0 0 17px}
.microfact{border-top:2px solid #24232165;padding-top:14px;gap:10px;color:#242321;line-height:1.45;font-size:12px}
.microfact strong{background:var(--sticker);border:1.5px solid #282421;border-radius:6px;padding:5px 7px;color:#242321;font-size:10px;line-height:1.25;white-space:nowrap;transform:rotate(-2deg)}
.microfact span{color:#292622;font-weight:550}
.twist-toggle{color:#26211f;font-size:12px;font-weight:800;line-height:1.5;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;text-align:left;transition:color .15s ease}
.twist-toggle:hover{color:var(--accent)}
.feature-actions{padding:12px 24px 22px;gap:9px;z-index:2}
.main-act{background:#d8f18f;color:#242321;font-size:13px;font-weight:800;border:2px solid #242321;border-radius:12px;min-height:53px;box-shadow:3px 4px 0 #242321;transition:transform .18s cubic-bezier(.2,1.6,.4,1),box-shadow .18s,background .18s}
.main-act:hover,.small-primary:hover{background:#fce399;transform:translateY(-2px);box-shadow:4px 6px 0 #242321}
.main-act:active,.small-primary:active{transform:translateY(3px);box-shadow:0 0 0 #242321}
.tool{background:#fff8ee;color:#242321;border:2px solid #242321;border-radius:12px;min-width:44px;min-height:53px;box-shadow:2px 3px 0 #242321;transition:transform .2s cubic-bezier(.2,1.4,.3,1),background .18s,box-shadow .18s}
.tool:hover{transform:translateY(-3px) rotate(-4deg);background:#fff4cf}
.tool:active{transform:scale(.91)}
.tool.active{background:#ff9b9b;color:#242321;border:2px solid #242321}
.swipe-help,.swipe-help button{color:#615950}
.bottom-nav{background:#fffcf5;border:2px solid #242321;border-radius:20px;box-shadow:4px 5px 0 #242321;backdrop-filter:none}
.nav-btn{color:#5c5750;font-weight:800;transition:transform .2s ease,background .2s ease,color .2s ease}
.nav-btn .nav-glyph{font-size:22px}
.nav-btn:hover{color:#1d1b19;transform:translateY(-2px)}
.nav-btn.selected{background:#d8ef94;color:#242321;box-shadow:inset 0 -2px 0 #9ab45c;animation:navBounce .3s cubic-bezier(.15,1.6,.45,1) both}
.panel-screen h1{color:#252321;font-family:"Fraunces",Georgia,serif;letter-spacing:-1.35px;font-weight:750}
.panel-screen .lead{color:#554e48}
.panel-screen{animation:panelIn .35s cubic-bezier(.21,.8,.29,1) both}
.pill{background:#fffcf4;color:#27231e;border:2px solid #252321;font-weight:750}
.list-card{background:#fffaf0;border:2px solid #242321;border-radius:17px;box-shadow:3px 4px 0 #242321;color:#242321;transition:transform .22s ease,box-shadow .22s ease}
.list-card:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:5px 7px 0 #242321}
.list-card small,.list-card span{color:#655b53}.list-card strong{font-family:"Fraunces",Georgia,serif;font-size:19px;letter-spacing:-.3px}
.note-text{color:#4d4640;border-top:1px solid #3c393535}
.empty{background:#fff9eb;border:2px dashed #27231e;color:#605952}.empty strong{color:#232321}
.small-primary{background:#d6ee8b;color:#242321;border:2px solid #242321;border-radius:10px;box-shadow:2px 3px 0 #242321;transition:transform .16s,background .16s,box-shadow .16s}
.subbtn{background:#fffaf2;color:#252321;border:2px solid #242321;border-radius:10px;font-weight:800;transition:background .18s,transform .18s}
.subbtn:hover{background:#ffe3c0;transform:translateY(-2px)}
.filter-chip{background:#fff9ed;color:#34312c;border:2px solid #242321;font-weight:750;transition:background .2s,transform .2s}
.filter-chip.on{background:#f8d49d;color:#242321}.filter-chip:hover{transform:translateY(-2px)}
.lesson{background:#fff9ee;border:2px solid #242321;box-shadow:5px 5px 0 #242321}
.lesson .question{color:#252321;font-family:"Fraunces",Georgia,serif;letter-spacing:-.4px}
.lesson label{color:#55463b}
.lesson textarea,.promptbox{background:#fffdf8;color:#252321;border:2px solid #242321}
.lesson textarea:focus,.promptbox:focus{border-color:#d96650}
.feedback{color:#315d44}
.topic-group{background:#fffaf1;border:2px solid #242321;box-shadow:3px 4px 0 #242321;border-radius:15px}
.topic-head{color:#242321}.topic-head span{color:#5d564e}
.topic-link{color:#242321;background:#fffaf1;border-top:1px solid #24232122}.topic-link:hover{background:#fcebd2}.topic-link small{color:#655c53}
#modal{background:#221a1696;backdrop-filter:blur(5px);animation:veilIn .23s ease both}
.sheet{background:#fffbf3;border:2px solid #242321;box-shadow:0 -16px 50px #24232166;color:#242321;animation:sheetIn .35s cubic-bezier(.16,.85,.24,1) both}
.handle{background:#b4aca0}
.sheet-headline{color:#242321;font-family:"Fraunces",Georgia,serif;font-weight:750;font-size:29px;line-height:1.1}
.section{border-bottom:1px solid #25232129}.section-label{color:#ad4b34;font-weight:850}
.section p{color:#484039}.section p[style*='color:white']{color:#242321!important}
.paperline,.paperline a{color:#61544c}.paperline a{color:#af4e39}
.source-row a{text-decoration:none}
.think-field label{color:#453c35}
.think-field textarea, #feedLink, #ideaTitle, #ideaBody{background:#fffcf6!important;color:#252321!important;border:2px solid #242321!important}
.reveal-box{background:#fff0bb;color:#252321;border:2px solid #242321;animation:revealPop .36s cubic-bezier(.16,1.4,.3,1) both}
.reveal-box span{color:#685437!important}
.settings-row{border-bottom:1px solid #25232128}.settings-row span{color:#332b24}.settings-row select{background:#fff9ed;color:#242321;border:2px solid #242321}
#feedStatus{color:#315d44!important}
.alert{background:#d6f28b;color:#242321;border:2px solid #242321;box-shadow:4px 5px 0 #242321}
.feature.enter-next{animation:cardNext .43s cubic-bezier(.19,.93,.31,1) both}
.feature.enter-back{animation:cardBack .43s cubic-bezier(.19,.93,.31,1) both}
.feature.enter-shuffle{animation:cardShuffle .5s cubic-bezier(.19,1.1,.3,1) both}
.microfact.revealed span{display:inline-block;animation:revealPop .36s cubic-bezier(.17,1.24,.35,1) both}
.tool.just-saved{animation:savePop .42s cubic-bezier(.1,1.7,.28,1) both}
@keyframes cardNext{from{opacity:.25;transform:translateY(46px) rotate(1deg) scale(.965)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes cardBack{from{opacity:.25;transform:translateY(-45px) rotate(-1deg) scale(.965)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes cardShuffle{0%{opacity:.2;transform:scale(.89) rotate(-3deg)}65%{opacity:1;transform:scale(1.017) rotate(.7deg)}100%{transform:scale(1) rotate(0)}}
@keyframes revealPop{from{opacity:0;transform:translateY(13px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes savePop{0%{transform:scale(.8) rotate(-12deg)}52%{transform:scale(1.24) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@keyframes sheetIn{from{opacity:.3;transform:translateY(70px)}to{opacity:1;transform:translateY(0)}}
@keyframes veilIn{from{opacity:0}to{opacity:1}}
@keyframes navBounce{from{transform:scale(.89)}to{transform:scale(1)}}
@keyframes panelIn{from{opacity:.1;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:940px){.screen{padding-bottom:103px}.feature{box-shadow:5px 6px 0 #242321}}
@media(max-width:480px){
  header{padding-top:14px}.brand{font-size:23px}.brand span:last-child{font-size:10px!important}
  .round{height:40px;width:40px}.feed-top{padding:0 7px}.feature{border-radius:22px}
  .feature-top{padding:19px 18px 0}.category{padding:7px 8px;font-size:9px;letter-spacing:.5px}.type-label{font-size:10px}
  .feature-content{padding:7px 20px;justify-content:center}
  .feature h1{font-size:clamp(31px,8.7vw,41px);line-height:1.065;letter-spacing:-1.2px;margin:13px 0}
  .feature .hook{font-size:14px;line-height:1.43;margin-bottom:15px}
  .tagline{font-size:10px}.microfact{font-size:11px;gap:7px}.microfact strong{font-size:9px;padding:5px}
  .feature-actions{padding:11px 18px 19px;gap:8px}
  .main-act{min-height:49px;padding:10px 9px;font-size:12px}.tool{min-height:49px;min-width:41px;padding:0 8px}
  .bottom-nav{bottom:calc(10px + var(--safe-bottom));height:69px}.nav-btn{font-size:10px}
  .panel-screen h1{font-size:31px}.sheet-headline{font-size:27px}
}
@media(max-height:720px){.feature-content{padding-top:0;padding-bottom:0}.feature h1{font-size:clamp(28px,7.7vw,38px)}.feature-top{padding-top:12px}.feature-actions{padding-bottom:13px}.feature .hook{font-size:13px}.microfact{padding-top:9px}}
@media(max-height:690px){.microfact{display:flex!important;font-size:10px;line-height:1.3;gap:6px}.microfact strong{font-size:9px;padding:4px}.twist-toggle{font-size:11px}.feature .hook{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important;transform:none!important}}

/* Rift 3.1 · Safe iPhone Home Screen header without changing the v3 aesthetic. */
:root{--safe-top:env(safe-area-inset-top,0px)}
/* Some installed iOS PWAs report zero safe-area until first paint. Reserve a minimum. */
html.is-standalone{--safe-top:max(47px,env(safe-area-inset-top,0px))}
#app{min-height:100dvh}
#app:before{top:var(--safe-top)}
header{
  flex-shrink:0;
  min-height:calc(75px + var(--safe-top));
  height:auto;
  padding-top:calc(19px + var(--safe-top));
  padding-bottom:14px;
  background:#f7f1e7;
  position:relative;
  z-index:20;
}
/* Scrolling happens in the content region, not behind the iOS status bar. */
.screen{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheet{max-height:min(calc(100dvh - var(--safe-top) - 12px),880px)}
@media(max-width:940px){
  .feature{height:clamp(410px,calc(100dvh - 220px - var(--safe-top) - var(--safe-bottom)),740px);min-height:0}
  .panel-screen{max-height:calc(100dvh - 145px - var(--safe-top) - var(--safe-bottom))}
}
@media(max-width:480px){
  header{height:auto;min-height:calc(64px + var(--safe-top));padding:calc(14px + var(--safe-top)) 17px 10px}
  .brand{min-width:0;flex-shrink:1}
  .brand span:last-child{display:none}
  .header-right{flex-shrink:0}
  .round{width:42px;height:42px;min-width:42px}
  .feature{height:clamp(395px,calc(100dvh - 208px - var(--safe-top) - var(--safe-bottom)),720px);min-height:0}
  .screen{padding-bottom:calc(106px + var(--safe-bottom))}
  .panel-screen{max-height:calc(100dvh - 143px - var(--safe-top) - var(--safe-bottom))}
}
@media(max-height:690px){
  header{height:auto;min-height:calc(58px + var(--safe-top))}
  .feature{height:clamp(385px,calc(100dvh - 196px - var(--safe-top) - var(--safe-bottom)),580px);min-height:0}
}


/* Rift 4 · subtle recommender and recall indicators: no decorative art behind type */
#reviewThought{font-family:"DM Sans",sans-serif;font-size:14px;line-height:1.5}
#reviewComparison{margin-top:10px;max-height:230px;overflow-y:auto}
#reviewComparison .reveal-box{font-size:12px;line-height:1.45;padding:12px}
#gradeBtns .subbtn,#gradeBtns .small-primary{padding:8px 11px}
.feature .tagline{max-width:100%}
#paperStatus{color:#376b52;font-weight:700}
#freshToggle{width:22px;height:22px;accent-color:#db6d53}
@media(max-width:480px){#reviewComparison{max-height:185px}#reviewThought{min-height:80px!important}}

/* v5 editorial mini-games and explanation workspace. No decoration behind article text. */
.v5-modebar{display:flex;gap:7px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:5px 2px 10px;max-width:100%;-webkit-overflow-scrolling:touch;flex:0 0 auto}
.v5-modebar::-webkit-scrollbar{display:none}
.v5-chip{border:1.5px solid #2b2722;border-radius:999px;padding:8px 12px;background:#fffaf1;color:#2b2722;white-space:nowrap;font-weight:800;font-size:11px;box-shadow:1px 2px 0 #252321;transition:transform .15s,background .15s}
.v5-chip.on{background:#ffc88d;transform:translateY(-1px);box-shadow:2px 3px 0 #252321}
.v5-chip:active{transform:scale(.96)}
#v5QuickExplain{font-family:"Fraunces",Georgia,serif;font-weight:850;font-size:22px;background:#b6eac6;color:#232321;border:2px solid #242321}
.v5-page{width:min(100%,880px);max-height:calc(100dvh - 160px - var(--safe-top) - var(--safe-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 6px 90px}
.v5-page-inner{max-width:740px;margin:auto}
.v5-banner{background:#ffc9a6;border:2px solid #272420;box-shadow:5px 6px 0 #242321;border-radius:21px;padding:19px 22px;margin:3px 0 20px;animation:panelIn .35s ease both}
.v5-banner h1{font:750 clamp(30px,6vw,51px)/1.06 "Fraunces",Georgia,serif;letter-spacing:-1px;color:#232321;margin:10px 0}
.v5-banner h1 em{color:#7940a9}.v5-banner p{color:#463b35;line-height:1.5;font-size:13px;max-width:590px;margin:0}
.v5-eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:900;text-transform:uppercase;color:#8f3b31}
.v5-game{background:#fffbf2;border:2px solid #28241f;box-shadow:5px 5px 0 #2a2620;border-radius:21px;padding:22px;margin:8px 0 18px;animation:panelIn .25s ease both}
.v5-game h2,.v5-definition h2,.v5-achievements h2,.v5-wrapcta h2{font-family:"Fraunces",Georgia,serif;color:#242321;font-size:clamp(23px,4.5vw,33px);line-height:1.13;margin:12px 0 15px;letter-spacing:-.6px}
.v5-game p{font-size:13px;color:#5c5046;line-height:1.6}
.v5-options{display:grid;grid-template-columns:1fr;gap:11px;margin:23px 0}
.v5-options button,.v5-paths button{background:#fff5df;border:2px solid #292621;border-radius:13px;padding:15px 16px;color:#252321;text-align:left;line-height:1.45;font-weight:750;transition:transform .2s,background .2s;box-shadow:2px 3px 0 #2b2723}
.v5-options button:hover,.v5-paths button:hover{background:#f9e4fa;transform:translateY(-2px)}
.v5-options button:disabled{opacity:.65;cursor:default}.v5-options button.right:disabled{background:#d3f1bb;opacity:1;border-width:3px}
.v5-feedback{background:#e1f0d7;border:2px solid #242321;border-radius:14px;padding:13px 16px;font-size:14px;color:#242321;line-height:1.55;margin:12px 0;animation:revealPop .25s ease both}.v5-feedback p{color:#252321;margin:6px 0}.v5-feedback small{color:#5f5245}
.v5-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}.v5-foot span{font-size:11px;color:#625850}
.v5-paths{display:grid;grid-template-columns:1fr;gap:10px;margin-top:18px}.v5-paths button{display:flex;flex-direction:column;gap:7px;background:#eee1fd}.v5-paths button:nth-child(2){background:#fbe6b2}.v5-paths button:nth-child(3){background:#cdebd9}
.v5-paths button span{font-size:12px;color:#5a514b;font-weight:500}.v5-paths button strong{font-family:"Fraunces",Georgia,serif;font-size:18px}
.v5-progress{height:9px;background:#ebe1d6;border:1px solid #292621;border-radius:99px;overflow:hidden;margin-bottom:23px}.v5-progress span{height:100%;display:block;background:#b9df73;transition:width .3s}
#v5LabAnswer,#v5AskQuestion{display:block;box-sizing:border-box;width:100%;min-height:124px;resize:vertical;background:#fffdf8;border:2px solid #252321;border-radius:12px;padding:13px;font:500 14px/1.5 "DM Sans",sans-serif;color:#252321;margin-top:13px}
#v5LabAnswer{min-height:160px}.v5-help{font-size:11px!important;color:#6a5e54!important;margin-top:23px!important}
#v5LearnSearch,#v5TermInput{background:#fffdf8;border:2px solid #252321;border-radius:10px;color:#252321;padding:12px;font:500 14px "DM Sans",sans-serif;min-width:0;flex:1;width:100%}
.v5-termgrid{display:flex;gap:7px;flex-wrap:wrap;max-height:210px;overflow:auto;margin:15px 0 22px}
.v5-termgrid button{background:#f7e6fb;border:1.5px solid #292621;padding:8px 11px;border-radius:22px;font-size:11px;color:#252321;font-weight:800;cursor:pointer}
.v5-termgrid button.active{background:#dbf0ad}.v5-termgrid button[hidden]{display:none}
.v5-definition{background:#f2e7fa;border:2px solid #292621;border-radius:18px;padding:17px;margin:14px 0}
.v5-definition h2{text-transform:capitalize;margin:8px 0}.v5-definition-text{font-size:15px!important;color:#30272c!important;line-height:1.65!important;min-height:65px}
.v5-defmodes{display:flex;gap:6px;flex-wrap:wrap}.v5-defmodes button{background:#fff8f0;border:1.5px solid #272321;border-radius:9px;font-size:11px;font-weight:800;padding:8px 10px;color:#272321}.v5-defmodes button.on{background:#ffc7a5}
.v5-quickcheck{margin-top:15px;padding:14px;background:#fff9ed;border-radius:13px;border:1px solid #524a4266}
.v5-quickcheck p{color:#493d34!important}.v5-quickanswer{font-size:13px;line-height:1.55;color:#2f4730;margin-top:9px}
.v5-helper{padding-bottom:18px}.v5-helper .section-label{margin:14px 0 5px}.v5-helper p{font-size:12px;line-height:1.6}.v5-helprow{display:flex;gap:8px;margin:12px 0;align-items:center}.v5-helprow .small-primary{white-space:nowrap}
#v5SelectionButton{font-size:11px;margin-bottom:9px}.v5-inline-term{background:transparent;color:inherit;font:inherit;border:none;padding:0;border-bottom:2px dotted #d46952;cursor:pointer;display:inline;line-height:inherit}.v5-inline-term:hover{background:#ffe5b8}
.v5-offline-miss{padding:13px;background:#f5eadb;border:1px dashed #242321;color:#36312b;border-radius:12px;line-height:1.5;font-size:12px;margin:12px 0}
#v5TutorOutput{margin:13px 0}.v5-modebar .v5-chip:focus-visible,.v5-inline-term:focus-visible{outline:3px solid #a778df}
.v5-wrapcta,.v5-achievements{margin:21px 0;border:2px solid #242321;border-radius:18px;padding:19px;background:#fbd3b4;box-shadow:3px 4px 0 #252321}.v5-wrapcta p{font-size:12px;color:#51463d}.v5-achievements{background:#ebdef8}.v5-badgegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:15px}
.v5-badge{min-height:76px;opacity:.5;background:#fff8f1;border:1px dashed #58514b;border-radius:12px;padding:11px;color:#2c2621}.v5-badge.earned{opacity:1;background:#d5edb1;border:2px solid #2c2621;box-shadow:2px 2px 0 #2c2621}.v5-badge b{display:block;font-family:"Fraunces",Georgia,serif;font-size:13px}.v5-badge small{font-size:10px;line-height:1.4;display:block;margin-top:5px}
@media(max-width:700px){.v5-page{max-height:calc(100dvh - 155px - var(--safe-top) - var(--safe-bottom));width:100%;padding:0 2px 90px}.v5-banner{padding:17px 18px;margin-top:8px}.v5-game{padding:16px}.v5-chip{font-size:10px;padding:8px 10px}.v5-helprow{flex-wrap:wrap}.v5-helprow .small-primary{flex:1}.v5-badgegrid{grid-template-columns:1fr 1fr}.feed-column .v5-modebar{padding-bottom:4px}.feature{height:clamp(370px,calc(100dvh - 258px - var(--safe-top) - var(--safe-bottom)),690px)}.feature-actions{gap:5px}.feature-actions .tool{min-width:37px;padding:0 5px}.feature-actions .main-act{font-size:11px}}
@media(max-height:670px){.v5-banner h1{font-size:30px}.feature{height:clamp(360px,calc(100dvh - 230px - var(--safe-top) - var(--safe-bottom)),550px)}}
@media(prefers-reduced-motion:reduce){.v5-game,.v5-feedback,.v5-banner,.v5-chip{animation:none!important;transition:none!important}}

.sheet-top{flex-wrap:wrap;gap:8px}
.v5-evidence{background:#f4edd6;border:2px solid #292621;border-radius:12px;padding:14px;margin:9px 0 15px;animation:panelIn .25s ease}
.v5-evidence p{font-size:12px;line-height:1.5;color:#3f3731}.v5-evidence a{font-weight:800;color:#a94b35;text-decoration:underline;font-size:12px}.v5-evidence small{display:block;margin-top:12px;font-size:10px;color:#625449}


  
/* Rift 5.1 — readable cards: content scrolls, actions stay visible, bottom nav never covers them */
.feature{height:clamp(415px,calc(100dvh - 318px - var(--safe-top) - var(--safe-bottom)),610px);min-height:0;touch-action:pan-y}
.feature-top{flex:0 0 auto}
.feature-content{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;justify-content:flex-start;padding-top:18px;padding-bottom:20px;scrollbar-width:thin;scrollbar-color:#24232155 transparent}
.feature h1{font-size:clamp(30px,3.4vw,45px);line-height:1.12;overflow-wrap:anywhere;hyphens:auto}
.feature-actions{flex:0 0 auto;padding:13px 24px 19px;background:var(--paper);border-top:1px solid #24232130;position:relative;z-index:3}
.feature .hook,.feature .microfact{flex-shrink:0}
.feed-column{min-height:0}
@media(max-width:940px){.feature{height:clamp(380px,calc(100dvh - 275px - var(--safe-top) - var(--safe-bottom)),650px)}}
@media(max-width:480px){
 .feature{height:clamp(355px,calc(100dvh - 274px - var(--safe-top) - var(--safe-bottom)),630px)}
 .feature-content{padding:12px 19px 16px;justify-content:flex-start}
 .feature h1{font-size:clamp(28px,7.6vw,37px);line-height:1.11;letter-spacing:-1.1px}
 .feature-actions{padding:11px 14px 14px;gap:7px}
 .main-act{min-width:0;overflow-wrap:anywhere}
 .tool{min-width:38px;padding:0 6px}
}
@media(max-height:690px){.feature{height:clamp(345px,calc(100dvh - 251px - var(--safe-top) - var(--safe-bottom)),490px)}.feature-content{padding-top:9px}}
/* More visible scroll affordance when a long research title requires scrolling. */
.feature-content::-webkit-scrollbar{width:4px}
.feature-content::-webkit-scrollbar-thumb{background:#342b2655;border-radius:6px}
/* iPhone safe areas are accounted for outside the scrollable card. */