:root{color-scheme:dark;--bg:#0b0f18;--panel:#121927;--edge:#39445b;--text:#eff3fb;--muted:#9aa8c4;--cyan:#70d8ea;--blue:#98b4ff;--gold:#deb97b;--red:#ff8eac;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;color:var(--text);background:radial-gradient(ellipse 80% 450px at 50% -160px,#203653 0%,transparent 100%),var(--bg);min-height:100dvh}button,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}.shell{max-width:960px;margin:auto;padding:22px clamp(12px,3vw,32px) 40px}.head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0 26px;border-bottom:1px solid #303a4f}.brand{display:flex;align-items:center;gap:12px}.star{font-size:29px;color:var(--cyan)}.brand-name{font-size:15px;letter-spacing:.14em;font-weight:800}.brand-name span{color:var(--cyan)}.brand-sub{font-size:9px;letter-spacing:.15em;color:var(--muted);margin-top:3px}.preview-tag{padding:7px 9px;border:1px solid #496276;border-radius:4px;letter-spacing:.09em;color:var(--cyan);font-size:10px;white-space:nowrap}.workspace{max-width:690px;margin:0 auto}.topline{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:26px 0 17px}.eyebrow{color:var(--cyan);font-size:10px;letter-spacing:.17em;font-weight:700}.topline h1{font-family:Georgia,serif;font-size:clamp(25px,4vw,35px);font-weight:500;margin:8px 0 0;line-height:1.12}.soft-btn{color:var(--text);background:#1c2636;border:1px solid #46536b;border-radius:7px;padding:12px;font-size:11px;letter-spacing:.04em}.soft-btn:hover,.soft-btn:focus-visible{background:#293951;outline:1px solid var(--cyan)}.scene{position:relative;overflow:hidden;border:1px solid #52637d;border-radius:12px;background:linear-gradient(180deg,#152d46,#131824);box-shadow:0 20px 70px #04060a99}.scene-glow{position:absolute;inset:0;background:radial-gradient(ellipse at center 36%,#4380a65e 0,transparent 50%)}.scene-art{height:188px;position:relative;display:flex;align-items:end;justify-content:space-evenly;padding-bottom:23px}.shelf{width:95px;height:96px;border:4px solid #795b4e;border-radius:3px 3px 0 0;border-bottom:9px solid #8b6e5d;display:flex;align-items:flex-end;padding:8px;gap:6px;transform:perspective(300px) rotateY(10deg)}.shelf-right{transform:perspective(300px) rotateY(-10deg)}.shelf i{display:block;width:17px;height:62px;background:#5d7493;box-shadow:inset 3px 0 #a5bbce,5px 0 #2b536a;border-radius:2px;transform:rotate(-5deg)}.shelf i:nth-child(2){height:73px;background:#a0747b}.shelf i:nth-child(3){height:55px;background:#688b7f}.ghost-book{position:relative;align-self:center;margin-top:18px;animation:float 3.4s ease-in-out infinite}.ghost-halo{position:absolute;inset:-25px;border-radius:50%;filter:blur(8px);background:#7be6e547}.book{position:relative;width:85px;height:105px;background:linear-gradient(120deg,#624b88 0%,#2a3b7b 55%,#5a4478);border:5px solid #d7b88b;box-shadow:9px 6px 0 -2px #ebdaba,0 0 38px #85a8e977;border-radius:3px 10px 9px 3px;transform:rotate(-12deg);display:grid;place-content:center}.book span{font-size:28px;color:#e1d7ff}.tail{width:12px;height:22px;margin:0 auto;background:#a8dfec77;filter:blur(7px)}@keyframes float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-9px)}}.scene-content{position:relative;padding:16px 20px 19px;background:#0d142ad1;border-top:1px solid #577c9777;backdrop-filter:blur(5px)}.scene-content p{margin:0}.scene-content p:last-child{line-height:1.58;margin-top:7px;color:#e5ecf7;font-size:14px}.meters{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:20px 2px}.meter-label{display:flex;justify-content:space-between;gap:8px;font-size:10px;letter-spacing:.06em;color:#bac6d9;margin-bottom:9px}.meter-label strong{color:var(--text);white-space:nowrap}.meter{height:7px;border-radius:99px;overflow:hidden;background:#354056}.meter-bar{height:100%;transition:width .25s}.integrity{background:linear-gradient(90deg,#2c90ac,#70dbd4)}.peace{background:linear-gradient(90deg,#8a62c5,#b0a2f0)}.signal{display:flex;gap:13px;align-items:flex-start;background:#241e2e;border:1px solid #726084;border-radius:9px;padding:14px 16px;margin-bottom:23px}.signal-dot{width:9px;height:9px;border-radius:50%;background:#ebaac3;box-shadow:0 0 15px #ed91bd;margin-top:3px;flex-shrink:0}.signal strong{font-size:11px;letter-spacing:.13em;color:#f2a5c1}.signal p{color:#e5dceb;font-size:13px;line-height:1.5;margin:7px 0 0}.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:13px}.section-head h2{font-size:18px;margin:0;font-weight:650}.section-head>span,.muted{color:var(--muted);font-size:10px;letter-spacing:.08em}.stance-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.stance{min-width:0;display:flex;align-items:center;flex-direction:column;gap:5px;padding:15px 5px;border:1px solid #465570;border-radius:9px;background:#172133;color:var(--text);transition:background .15s,border-color .15s}.stance .stance-symbol{font-size:28px;color:#aabbe0;line-height:1.1}.stance span:nth-child(2){font-size:13px;font-weight:800;letter-spacing:.07em}.stance small{font-size:10px;color:#a6b4d0}.stance:hover,.stance:focus-visible{border-color:#b2d8ef;outline:none}.stance.chosen{background:#27455a;border-color:#73daeb;box-shadow:inset 0 0 0 1px #73daeb88}.stance.chosen .stance-symbol{color:var(--cyan)}.decision{background:#121b2a;border:1px solid #394860;border-radius:9px;padding:13px;margin:10px 0}.decision-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:600}.decision-top label{display:flex;gap:7px;align-items:center;font-size:9px;color:var(--muted);letter-spacing:.04em}.decision select{max-width:170px;background:#1d3042;border:1px solid #56647b;border-radius:5px;padding:8px;color:var(--text);font-size:11px}.hint{color:var(--muted);font-size:11px;line-height:1.55}.commit{display:block;width:100%;background:linear-gradient(110deg,#4d7ca4,#387b8a);border:1px solid #82b6c7;border-radius:7px;color:#fff;padding:13px;font-weight:800;letter-spacing:.09em;font-size:12px;margin-top:12px}.commit:not(:disabled):hover,.commit:not(:disabled):focus-visible{filter:brightness(1.2);outline:2px solid #c7f5ff}.extras{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.extras .soft-btn{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;line-height:1.3}.extras span{color:var(--muted);font-size:10px}.journal{padding-top:27px;margin-top:30px;border-top:1px solid #364159}.journal ol{list-style:none;margin:0;padding:0}.journal li{border-left:2px solid #56758c;padding:2px 0 16px 14px;margin-left:5px}.logmeta{font-size:10px;letter-spacing:.08em;color:var(--cyan)}.journal li p{margin:7px 0 0;font-size:13px;color:#d7dfef;line-height:1.55}.outcome{padding:19px;border:1px solid #8c83bf;border-radius:10px;background:#26233b}.outcome h2{font-family:Georgia,serif;font-size:24px;margin:0}.outcome p{line-height:1.6;font-size:14px}footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:#6f829c;letter-spacing:.1em;font-size:10px;margin-top:40px;padding-top:16px;border-top:1px solid #293447}@media(max-width:520px){.head{align-items:flex-start}.brand-name{font-size:12px}.brand-sub{font-size:8px}.preview-tag{font-size:8px}.shell{padding:12px 11px 24px}.scene-art{height:153px}.scene-content{padding:13px}.meters{gap:11px}.meter-label{font-size:9px}.stance-grid{gap:6px}.stance{padding:12px 1px}.stance span:nth-child(2){font-size:11px}.stance small{font-size:9px}.extras{grid-template-columns:1fr}.extras .soft-btn{flex-direction:row;justify-content:space-between}.decision-top{align-items:flex-start;flex-direction:column}.decision-top label{width:100%;justify-content:space-between}}
@media(prefers-reduced-motion:reduce){.ghost-book{animation:none}*{transition:none!important}}

/* QOL1: the encounter's environment is tappable and every action gives visible feedback. */
button.ghost-book{appearance:none;background:transparent;border:0;color:inherit;padding:0;cursor:pointer;display:block;z-index:1;min-width:92px;min-height:125px;touch-action:manipulation}
button.ghost-book .ghost-halo,button.ghost-book .book,button.ghost-book .tail{display:block}
button.ghost-book:focus-visible{outline:3px solid #96edff;outline-offset:7px;border-radius:9px}
button.ghost-book:hover .book,button.ghost-book:focus-visible .book{box-shadow:9px 6px 0 -2px #ebdaba,0 0 52px #70e6ff}
button.ghost-book:disabled{cursor:default;opacity:1}
.tap-cue{position:relative;z-index:2;text-align:center;font-size:10px;color:#cceefa;letter-spacing:.11em;background:#102039;padding:9px 8px;border-top:1px solid #355574}
.objective{padding:15px 17px;background:#151f30;border:1px solid #485a74;border-radius:10px;margin:16px 0 2px}
.objective p{margin:7px 0 4px;font-size:15px;line-height:1.45;font-weight:600}
.objective small{display:block;color:#bbcbe0;font-size:12px;line-height:1.5}
.feedback{border:1px solid #527f85;border-radius:9px;background:#152a31;padding:14px 16px;margin:0 0 12px}
.feedback .eyebrow{color:#93eed5}
.feedback p{margin:7px 0 0;color:#e5f3f4;font-size:14px;line-height:1.54}
.journal-tools{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:14px}
.journal-tools p{color:var(--muted);font-size:11px;line-height:1.5;margin:0;max-width:400px}
.journal-tools .export-btn{white-space:nowrap;font-weight:700;border-color:#6e8a9b;color:#dcf6ff}
@media(max-width:520px){.journal-tools{flex-direction:column;align-items:stretch}.journal-tools .export-btn{width:100%;min-height:44px}.objective{margin-top:12px}.scene-art{height:175px}.stance{min-height:75px}}
/* Keep the touch target stationary while the illustration floats inside it. */
button.ghost-book{animation:none}
button.ghost-book .book{animation:float 3.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){button.ghost-book .book{animation:none}}