:root{ --ink:#14161C; --slate:#20242E; --slate-2:#2B3040; --plane:#E9E6DE; --rule:#3A4152; --text-dim:#9AA2B4; --canon:#3E8C7E; --interpretive:#C08A2E; --divergent:#8C63BE; --broken:#C4544A; /* Script coverage. The webfonts loaded in index.html are Latin-only apart from Noto Serif SC, but the UI can render in any supported language — including Arabic, Hebrew, Persian, Urdu, Devanagari, Thai, kana and Hangul. Each stack therefore ends in system faces for those scripts before the generic family, so a locale never falls back to a font missing its glyphs. These are names, not downloads: they cost nothing unless actually used. */ --fallback-intl:'Noto Sans','Noto Sans Arabic','Noto Sans Hebrew','Noto Sans Devanagari', 'Noto Sans Thai','Geeza Pro','Arial Hebrew','Hiragino Sans','Yu Gothic','Meiryo', 'Malgun Gothic','Apple SD Gothic Neo','Microsoft YaHei','Leelawadee UI','Nirmala UI'; --display:'Fraunces',Georgia,var(--fallback-intl),serif; --han:'Noto Serif SC','Songti SC','SimSun','Noto Serif JP','Hiragino Mincho ProN', 'Noto Serif KR',var(--fallback-intl),serif; --body:'IBM Plex Sans',-apple-system,'Segoe UI',var(--fallback-intl),sans-serif; --mono:'IBM Plex Mono',ui-monospace,var(--fallback-intl),monospace; } *{box-sizing:border-box} body{margin:0;background:var(--ink);color:var(--plane);font-family:var(--body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased} button{font:inherit;color:inherit;cursor:pointer;background:none;border:none} :focus-visible{outline:2px solid var(--divergent);outline-offset:2px} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} .topbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 22px;border-bottom:1px solid var(--rule);background:var(--slate);position:sticky;top:0;z-index:20} .wordmark{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em} .wordmark span{color:var(--divergent)} .tagline{font-family:var(--mono);font-size:10.5px;color:var(--text-dim);letter-spacing:.05em} .spacer{flex:1} .statusdot{width:8px;height:8px;border-radius:50%;background:var(--text-dim);flex:none} .statusdot.ok{background:var(--canon)} .statusdot.warn{background:var(--interpretive)} .statusdot.bad{background:var(--broken)} .langswitch{background:transparent;border:1px solid var(--rule);border-radius:2px;padding:8px 10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--text-dim);flex:none} .langswitch:hover{border-color:var(--plane);color:var(--plane)} .langswitch option{background:var(--slate);color:var(--plane)} .whoami{display:flex;align-items:center;gap:8px;min-width:0} .whoami .who{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--text-dim); max-width:20ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* RTL (ar, he): the document direction is set on by the i18n provider. Layout uses logical properties throughout, so only these physically-mirrored affordances need an override. */ [dir="rtl"] .tagline{direction:ltr;unicode-bidi:isolate} [dir="rtl"] .rom,[dir="rtl"] .sub,[dir="rtl"] .ref,[dir="rtl"] .src{direction:ltr;unicode-bidi:isolate;text-align:start} [dir="rtl"] .bar{transform:scaleX(-1)} /* stepper */ .stepper{display:flex;gap:0;flex-wrap:wrap;border-bottom:1px solid var(--rule);background:var(--slate-2);padding:0 22px} .step{display:flex;align-items:center;gap:8px;padding:11px 18px 11px 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);opacity:.5} .step .n{width:19px;height:19px;border-radius:50%;border:1px solid var(--rule);display:grid;place-items:center;font-size:10px} .step.on{opacity:1;color:#fff} .step.on .n{background:var(--divergent);border-color:var(--divergent);color:#150C21} .step.done{opacity:.85;color:var(--canon)} .step.done .n{border-color:var(--canon);color:var(--canon)} .step:not(:last-child)::after{content:"";width:22px;height:1px;background:var(--rule);margin-inline-start:10px} .wrap{max-width:1180px;margin:0 auto;padding:26px 22px 80px} .screen{display:none} .screen.on{display:block} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin:0 0 8px} h1{font-family:var(--display);font-weight:300;font-size:clamp(26px,4vw,42px);line-height:1.06;letter-spacing:-.02em;margin:0 0 12px} h1 em{font-style:italic;font-weight:500;color:#fff} h3{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin:0 0 12px;font-weight:500} .lede{max-width:62ch;color:#C9CCD6;font-size:15.5px} /* raw error text on the crash screen — was an inline style, which the i18n rules forbid because inline declarations cannot be mirrored for RTL */ .errordetail{font-family:var(--mono);font-size:12px;opacity:.7} .panel{background:var(--slate);border:1px solid var(--rule);border-radius:3px;padding:18px} /* landing: what the app does, before it asks for a choice */ .howto{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:26px 0 6px; border-block:1px solid var(--rule);padding:20px 0} .howstep .n{display:grid;place-items:center;width:20px;height:20px;border-radius:50%; border:1px solid var(--divergent);color:var(--divergent);font-family:var(--mono);font-size:10px;margin-bottom:9px} .howstep h3{margin:0 0 6px;color:var(--plane)} .howstep p{margin:0;font-size:13.4px;line-height:1.55;color:#B7BCC9} .worksin{font-family:var(--display);font-weight:300;font-size:22px;letter-spacing:-.01em;margin:26px 0 0} .worksin em{font-style:italic;font-weight:500;color:#fff} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:24px} .card{background:var(--slate);border:1px solid var(--rule);border-radius:3px;text-align:start;width:100%;padding:16px;transition:border-color .15s,transform .15s} .card:hover{border-color:var(--divergent);transform:translateY(-2px)} .card:disabled{opacity:.42;cursor:not-allowed;transform:none;border-color:var(--rule)} .card .native{font-family:var(--han);font-size:26px;font-weight:500;line-height:1.1;margin-bottom:3px} .card .native.lat{font-family:var(--display);font-size:24px;font-weight:500} .card .rom{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)} .card .meta{font-family:var(--mono);font-size:10.5px;color:var(--text-dim);letter-spacing:.05em;margin-top:9px} .card p{margin:9px 0 0;font-size:13.3px;color:#B7BCC9} .badge{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:2px;border:1px solid var(--rule);color:var(--text-dim);margin-top:10px} .badge.ok{color:var(--divergent);border-color:var(--divergent)} .badge.note{color:var(--interpretive);border-color:var(--interpretive)} /* a work that a free sign-in would open — offered, not hidden */ .card.locked{border-style:dashed} .card.locked .native,.card.locked .rom,.card.locked p{opacity:.72} .card.locked:hover{border-color:var(--interpretive);border-style:solid} .unlocknote{margin-top:18px} .linkbtn{padding:0;text-decoration:underline;text-underline-offset:3px;color:var(--divergent);font-size:inherit} .linkbtn:hover{color:#B48CE0} /* scene card */ /* read-aloud */ .speak{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--rule);border-radius:2px; padding:3px 8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--text-dim);flex:none;vertical-align:middle} .speak:hover{border-color:var(--divergent);color:var(--plane)} .speak.on{border-color:var(--divergent);color:#fff;background:rgba(140,99,190,.18)} .speak.tiny{padding:1px 6px;font-size:9px;margin-inline-start:8px} h3 .speak{margin-inline-start:10px} /* on the light-plane surfaces (scene cards, branch beats, story view) */ .scene .speak,.branchcol .beat .speak,.beats.story .speak{border-color:#C9C4B8;color:#6B7183} .sceneaudio{display:flex;justify-content:flex-end;margin-bottom:6px} .scenewrap{min-width:0} @media (max-width:560px){.speaklabel{display:none}} .scenes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px} .scene{background:var(--plane);color:#1A1D24;border-radius:3px;padding:18px 20px;text-align:start;width:100%;border:1px solid transparent;transition:border-color .15s} .scene:hover{border-color:#1A1D24} .scene:disabled{opacity:.5;cursor:not-allowed} .scene .ref{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#6B7183;border-bottom:1px solid #C9C4B8;padding-bottom:8px;margin-bottom:12px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 10px} /* Provenance badge: a generated scene is verified, not authored, and says so. */ .scene .origin{font-size:9px;letter-spacing:.07em;color:#7A5B16;background:#EFE4C8;border:1px solid #D8C79B;border-radius:2px;padding:2px 6px;flex:none} .scene .st{font-family:var(--display);font-size:20px;font-weight:500;line-height:1.2;margin-bottom:8px} .scene .st.han{font-family:var(--han)} .scene .setup{font-size:13.6px;color:#3A3F4A;margin:0 0 10px} .scene .asw{font-size:12.8px;color:#4A5060;padding-inline-start:13px;border-inline-start:3px solid var(--canon);margin:0} .scene .asw b{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#6B7183;display:block;margin-bottom:3px} /* config */ .cfg{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;margin-top:22px;align-items:start} .axis{margin-bottom:26px} .axis .lab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px} .axis .lab span:first-child{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)} .axis .lab span:last-child{font-size:12px;color:var(--text-dim)} .opts{display:flex;gap:7px;flex-wrap:wrap} .opt{border:1px solid var(--rule);border-radius:2px;padding:7px 12px;font-size:13.5px;color:#C9CCD6} .opt[aria-pressed="true"]{border-color:var(--divergent);color:#fff;background:rgba(140,99,190,.16)} .opt.strict[aria-pressed="true"]{border-color:var(--canon);background:rgba(62,140,126,.16)} .opt.loose[aria-pressed="true"]{border-color:var(--broken);background:rgba(196,84,74,.14)} .hint{font-size:12.6px;color:var(--text-dim);margin:9px 0 0;max-width:56ch} /* who you are — a continuation of "who holds the pen", so it sits inside it */ .rolepick{margin-top:-14px;margin-inline-start:14px;padding-inline-start:14px; border-inline-start:2px solid var(--rule)} .rolepick .hint b{color:var(--plane);font-weight:500} .slot.role .txt{border-inline-start-color:#6B7183} /* departure card */ .dcard{background:var(--plane);color:#1A1D24;border-radius:3px;padding:22px 24px;position:sticky;top:96px} .dcard .kicker{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#6B7183} .dcard .tt{font-family:var(--display);font-size:24px;font-weight:500;line-height:1.15;margin:5px 0 3px} .dcard .tt.han{font-family:var(--han)} .dcard .sub{font-family:var(--mono);font-size:11px;color:#6B7183;letter-spacing:.05em;padding-bottom:14px;border-bottom:1px solid #C9C4B8;margin-bottom:15px} .slot{margin-bottom:15px} .slot b{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#6B7183;display:block;margin-bottom:4px} .slot .txt{font-size:14.6px;line-height:1.55;padding-inline-start:13px;border-inline-start:3px solid var(--divergent)} .slot.end .txt{border-inline-start-color:var(--interpretive)} .slot.tests .txt{border-inline-start-color:var(--canon);font-size:13.4px;color:#3A3F4A} .spec{display:flex;gap:16px;flex-wrap:wrap;border-top:1px solid #C9C4B8;padding-top:13px;margin-top:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:#6B7183} .spec i{font-style:normal;color:#1A1D24;display:block;font-size:15px;font-family:var(--display);font-weight:500} .warnbox{margin-top:14px;padding:11px 13px;background:#F0DAD7;border-inline-start:3px solid var(--broken);font-size:12.6px;color:#5A2622;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:2px;border-end-end-radius:2px} .warnbox.interpretive{background:#EDE4D2;border-inline-start-color:var(--interpretive);color:#4A3A18} .warnbox b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px} .cta{background:var(--divergent);color:#150C21;border-radius:2px;padding:11px 20px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600} .cta:hover{background:#9E77CC} .cta:disabled{opacity:.45;cursor:not-allowed} .ghost{border:1px solid var(--rule);border-radius:2px;padding:10px 16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)} .ghost:hover{border-color:var(--plane);color:var(--plane)} .ghost:disabled{opacity:.4;cursor:not-allowed} .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center} /* ── runner ───────────────────────────────────────────────────────────────── */ .runmeta{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:11px 0;margin:18px 0 22px} .runmeta i{font-style:normal;color:var(--plane)} .runmeta .bar{display:inline-block;width:74px;height:5px;background:var(--rule);border-radius:3px;overflow:hidden;vertical-align:middle;margin-inline-start:6px} .runmeta .bar span{display:block;height:100%;background:var(--divergent)} /* reading controls: view, comments, configuration */ .readbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 16px} .readbar .grp{display:flex;gap:0} .readbar .grp .opt:first-child{border-start-end-radius:0;border-end-end-radius:0} .readbar .grp .opt:last-child{border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:-1px} .readbar .opt{font-size:12.5px;padding:6px 11px} .readhint{flex:1 1 260px;min-width:0;font-size:12.4px;color:var(--text-dim);line-height:1.45} /* modal dialog */ .modalback{position:fixed;inset:0;z-index:60;background:rgba(10,8,16,.72); display:flex;align-items:flex-start;justify-content:center;padding:6vh 20px 20px;overflow-y:auto; animation:modalin .12s ease-out} @keyframes modalin{from{opacity:0}to{opacity:1}} .modal{background:var(--slate);border:1px solid var(--rule);border-radius:4px;width:100%;max-width:620px; box-shadow:0 24px 60px rgba(0,0,0,.55)} .modal:focus{outline:none} .modal:focus-visible{outline:2px solid var(--divergent);outline-offset:2px} .modalhead{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:15px 18px;border-bottom:1px solid var(--rule)} .modalhead h3{margin:0} .modalclose{border:1px solid var(--rule);border-radius:2px;width:28px;height:28px;flex:none; display:grid;place-items:center;font-size:12px;color:var(--text-dim);line-height:1} .modalclose:hover{border-color:var(--plane);color:var(--plane)} .modalbody{padding:4px 18px 14px} @media (prefers-reduced-motion:reduce){.modalback{animation:none}} .cfgpanel{background:var(--slate);border:1px solid var(--rule);border-radius:3px;padding:6px 16px;margin:0 0 18px} /* inside the dialog the panel supplies no chrome of its own */ .modal .cfgpanel{background:none;border:none;border-radius:0;padding:0;margin:0} .cfgrow{display:grid;grid-template-columns:minmax(120px,1fr) minmax(90px,1fr) 2.4fr;gap:6px 14px; align-items:baseline;padding:9px 0;border-bottom:1px solid var(--rule)} .cfgrow:last-child{border-bottom:none} .cfgrow .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)} .cfgrow .v{font-size:14px;color:#fff} .cfgrow .h{font-size:12.6px;color:var(--text-dim)} @media (max-width:640px){.cfgrow{grid-template-columns:1fr}} /* the branch read as one continuous story */ .storyview{max-width:70ch} .beats.story{gap:0;background:var(--plane);color:#1A1D24;border-radius:3px;padding:26px 30px} .beats.story .beat{background:none;border:none;border-inline-start:none;padding:0; font-size:15.6px;line-height:1.72} .beats.story .beat+.beat{margin-top:0} .beats.story .beat p{text-indent:1.6em} .beats.story .beat:first-child p{text-indent:0} .beats.story .beat .no{margin-top:16px} .beats.story .beat.pending{background:none;color:#4A5060;padding:0} .beats.story .pendingbeat{background:none;padding:0;margin-top:14px} .columns{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start} .col{min-width:0} .beats{display:flex;flex-direction:column;gap:12px} .beat{border-radius:3px;padding:14px 16px;font-size:14.2px;line-height:1.6} .canoncol .beat{background:var(--slate);border:1px solid var(--rule);color:#C4C9D6} .branchcol .beat{background:var(--plane);color:#1A1D24;border-inline-start:3px solid var(--divergent)} .beat .no{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#6B7183;display:block;margin-bottom:6px} .canoncol .beat .no{color:var(--text-dim)} .beat p{margin:0} .beat .han{font-family:var(--han)} .beat .move{margin:0 0 9px;padding-inline-start:11px;border-inline-start:2px solid #C9C4B8;font-size:13px;color:#4A5060;font-style:italic} .beat .flag{margin-top:10px;padding:9px 11px;border-radius:2px;font-size:12.4px;font-family:var(--body)} .beat .flag b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px} .flag.flagged{background:#EDE4D2;color:#4A3A18;border-inline-start:3px solid var(--interpretive)} .flag.refused{background:#F0DAD7;color:#5A2622;border-inline-start:3px solid var(--broken)} .flag.off{background:#E1DED6;color:#5A5A5A;border-inline-start:3px solid #9A9A9A} .beat .src{margin-top:9px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:#6B7183} .beat.pending{opacity:.55;font-style:italic} /* Waiting on the model. The skeleton keeps each column's height while the beat is in flight; the wait notice below the composer carries the detail. All motion here is decorative and is removed by the reduced-motion rule at the top of this file, which leaves a legible static state. */ .pendingbeat .skeleton{display:flex;flex-direction:column;gap:7px;margin:0} .pendingbeat .skeleton .line{display:block;height:10px;border-radius:2px; background:linear-gradient(90deg,var(--rule) 0%,var(--slate-2) 40%,var(--rule) 80%); background-size:280% 100%;animation:shimmer 1.5s ease-in-out infinite} .branchcol .pendingbeat .skeleton .line{background:linear-gradient(90deg,#D5D1C7 0%,#EDEAE3 40%,#D5D1C7 80%);background-size:280% 100%} .pendingbeat .skeleton .line.short{width:62%} .pendingbeat .skeleton .line:nth-child(2){animation-delay:.15s} .pendingbeat .skeleton .line:nth-child(3){animation-delay:.3s} @keyframes shimmer{0%{background-position:180% 0}100%{background-position:-80% 0}} /* Direction-aware: the sweep should run with the text, not against it. */ [dir="rtl"] .pendingbeat .skeleton .line{animation-direction:reverse} .waiting{margin-top:14px;padding:13px 15px;background:var(--slate);border:1px solid var(--rule); border-inline-start:3px solid var(--divergent);border-radius:3px} .waitinghead{display:flex;align-items:center;gap:9px} .waitinghead b{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--plane)} .spinner{width:11px;height:11px;flex:none;border-radius:50%;border:2px solid var(--rule); border-top-color:var(--divergent);animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .waitingbody{margin:8px 0 0;font-size:13.4px;line-height:1.55;color:#C4C9D6} .waitingmeta{margin:7px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.07em;color:var(--text-dim)} .waitingslow{margin:9px 0 0;padding-top:9px;border-top:1px solid var(--rule); font-size:12.6px;line-height:1.5;color:var(--interpretive)} /* Reduced motion: no sweep, no spin — keep a visible static indicator instead. */ @media (prefers-reduced-motion:reduce){ .pendingbeat .skeleton .line{background:var(--rule)} .branchcol .pendingbeat .skeleton .line{background:#D5D1C7} .spinner{border-top-color:var(--divergent);border-inline-end-color:var(--divergent)} } .composer{margin-top:26px;border-top:1px solid var(--rule);padding-top:18px} .composerlabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);display:block;margin-bottom:7px} .composer textarea{width:100%;background:var(--slate);border:1px solid var(--rule);border-radius:3px;color:var(--plane);font:inherit;font-size:14.4px;padding:11px 13px;resize:vertical} .composer textarea:focus{border-color:var(--divergent);outline:none} .editorbtns{display:inline-flex;gap:8px;flex-wrap:wrap} .runstatus{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--text-dim)} .runstatus.err{color:var(--broken)} .convergence{margin-top:28px;background:var(--plane);color:#1A1D24;border-radius:3px;padding:22px 24px} .convergence h2{font-family:var(--display);font-weight:500;font-size:22px;margin:6px 0 12px} .convergence .kicker{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#6B7183} .convergence table{width:100%;border-collapse:collapse;margin-top:14px;font-size:13.4px} .convergence th{text-align:start;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#6B7183;border-bottom:1px solid #C9C4B8;padding:0 10px 7px 0;font-weight:500} .convergence td{padding:8px 10px 8px 0;border-bottom:1px solid #D8D4CA;vertical-align:top} @media (max-width:940px){ .cfg{grid-template-columns:1fr} .scenes{grid-template-columns:1fr} .dcard{position:static} .columns{grid-template-columns:1fr} }