/* my.triolume.io (2 Nov 2026, from the approved Triolume web book): the sign-in, the cabin (Manage my ARC) and Sphere · live
   in Triolume's own face, dark and light. One shell: the rooms on the left, Say it and the theme on top, the room in the
   middle, one Say it line at the bottom. The ship's CSP allows no web fonts (font-src 'self'): Inter if the device has it.
   Tokens: --bg --panel --line --fg --mute --acc --acc2 --warm. html[data-theme=light] is the light set; with no data-theme
   the device decides (prefers-color-scheme). Every id the pages' scripts use is unchanged. */
:root{--bg:#07090D;--panel:#0E131B;--line:#1A2230;--fg:#E8ECF2;--mute:#8A93A3;--acc:#8FE3FF;--acc2:#5BC8F0;--warm:#F0B35B;
  --ink:#07090D;--field:#1A2230;--soft:#B4BCC8;--faint:#5E6878;--ok:#8FE3B5;--okbg:#10201B;--okline:#2E6B5A;--btn2:#C9D1DC;
  --comet:#FFFFFF;--ground:var(--bg);--text:var(--fg);--muted:var(--mute);--accent:var(--acc);--hair:var(--line);color-scheme:dark}
html[data-theme=light]{--bg:#F5F7FA;--panel:#FFFFFF;--line:#DCE2EA;--fg:#0B0F16;--mute:#5B6678;--acc:#0E7FA8;--acc2:#0A6A8C;--warm:#B8780A;
  --ink:#FFFFFF;--field:#DCE2EA;--soft:#3A4556;--faint:#7A8495;--ok:#1E7A4F;--okbg:#EAF6EF;--okline:#9CD3B5;--btn2:#2E3A4C;--comet:#0E7FA8;color-scheme:light}
@media (prefers-color-scheme:light){html:not([data-theme]){--bg:#F5F7FA;--panel:#FFFFFF;--line:#DCE2EA;--fg:#0B0F16;--mute:#5B6678;--acc:#0E7FA8;--acc2:#0A6A8C;--warm:#B8780A;
  --ink:#FFFFFF;--field:#DCE2EA;--soft:#3A4556;--faint:#7A8495;--ok:#1E7A4F;--okbg:#EAF6EF;--okline:#9CD3B5;--btn2:#2E3A4C;--comet:#0E7FA8;color-scheme:light}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:14px}
a{color:var(--acc)}a:hover{color:var(--acc2)}
input,button{font-family:inherit}
[hidden]{display:none!important}
h1,h2,h3{font-weight:600;letter-spacing:-.01em}
.kicker,.label,.k{font-size:11px;letter-spacing:.16em;color:var(--mute);text-transform:uppercase}
.btn{min-height:48px;border-radius:12px;border:0;background:var(--acc);color:var(--ink);font-size:15px;font-weight:600;cursor:pointer;padding:0 18px}
.btn:disabled{opacity:.6;cursor:default}
.btn2{min-height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--btn2);font-size:13px;cursor:pointer}
.btn2.on{border-color:var(--acc);color:var(--acc)}
.msg{margin:0;font-size:13px;color:#E06B6B;min-height:0}
.msg:empty{display:none}
.msg.ok{color:var(--ok)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;color:var(--mute)}
.field input{font-size:15px;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);min-height:44px;width:100%}
.field input:focus{outline:none;border-color:var(--acc)}
.field input.pin{font-size:20px;letter-spacing:.3em;padding:10px 14px}
.field input.code{font-size:20px;letter-spacing:.14em;padding:10px 14px;text-transform:uppercase}
.field .hint{font-size:12px;color:var(--faint)}
.fine{font-size:12px;color:var(--faint);line-height:1.5}

/* ---- the O (the mark everywhere) */
.o-mark{display:inline-block;vertical-align:middle}
@keyframes o-turn{to{transform:rotate(360deg)}}
.o-mark .o-comet{transform-origin:56px 56px;animation:o-turn 9s linear infinite}
.o-mark .o-comet circle{fill:var(--comet)}
@media (prefers-reduced-motion:reduce){.o-mark .o-comet{animation:none}}

/* ---- the shell: rail · top · room · the line */
.shell{min-height:100vh;display:grid;grid-template-columns:200px minmax(0,1fr);grid-template-rows:56px minmax(0,1fr) 54px;grid-template-areas:"rail top" "rail room" "rail line"}
.rail{grid-area:rail;border-right:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;padding:16px 0}
.rail .brand{display:flex;align-items:center;gap:10px;padding:2px 16px 18px;text-decoration:none;color:var(--fg)}
.rail .brand span{font-size:12px;letter-spacing:.3em;font-weight:600}
.rail .k{padding:8px 16px 4px}
.rail a.room{display:block;padding:9px 16px;margin:1px 8px;border-radius:8px;color:var(--mute);text-decoration:none;font-size:13px}
.rail a.room:hover{color:var(--fg);background:rgba(143,227,255,.06)}
.rail a.room.on{color:var(--fg);background:rgba(143,227,255,.1);box-shadow:inset 2px 0 0 var(--acc)}
.rail .rail-foot{margin-top:auto;padding:12px 16px 0;font-size:11px;color:var(--faint);line-height:1.5}
.topbar{grid-area:top;display:flex;align-items:center;gap:14px;padding:0 22px;border-bottom:1px solid var(--line);background:var(--panel)}
.topbar .say{flex:1;max-width:460px;display:flex}
.topbar .say input{width:100%;min-height:34px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--fg);padding:0 14px;font-size:13px}
.topbar .say input::placeholder{color:var(--mute)}
.topbar .say input:focus{outline:none;border-color:var(--acc)}
.topbar .spacer{flex:1}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{border:0;background:transparent;color:var(--mute);font-size:12px;padding:6px 12px;cursor:pointer}
.seg button.on{background:var(--acc);color:var(--ink)}
.who{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mute)}
.ini{width:28px;height:28px;border-radius:50%;background:var(--line);display:flex;align-items:center;justify-content:center;color:var(--acc);font-weight:600;font-size:12px}
.room-main{grid-area:room;padding:24px 28px 32px;max-width:1280px;width:100%;display:flex;flex-direction:column;gap:22px;overflow:auto}
.room-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.room-head h1{margin:0;font-size:22px}
.room-head .sub{font-size:12px;color:var(--mute)}
.sayline{grid-area:line;display:flex;align-items:center;gap:12px;padding:0 22px;border-top:1px solid var(--line);background:var(--panel)}
.sayline form{flex:1;display:flex;gap:10px;align-items:center}
.sayline input{flex:1;min-height:34px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--fg);padding:0 14px;font-size:13px}
.sayline input::placeholder{color:var(--mute)}
.sayline input:focus{outline:none;border-color:var(--acc)}
.sayline .arrow{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--acc);font-size:16px;cursor:pointer}
.foot-note{font-size:11px;color:var(--faint);white-space:nowrap}

/* ---- cards and rows, the room's furniture */
.card,.mcard,.keeper,.tile,.mini,.rules,.wait{background:var(--panel);border:1px solid var(--line);border-radius:14px}
.card{display:flex;flex-direction:column;gap:14px;padding:26px;max-width:460px;width:100%}
.card h2{margin:0;font-size:19px}
.card .lede{margin:0;font-size:14px;line-height:1.5;color:var(--soft)}
.ways{display:flex;flex-direction:column;gap:8px;padding-top:8px;border-top:1px solid var(--line)}
.ways a{font-size:13px;text-decoration:none}
.ways a.quiet{color:var(--mute)}
.chair{display:flex;justify-content:center;padding:12px 0}
.chair .outer{width:150px;height:150px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:var(--bg)}
.chair .inner{width:112px;height:112px;border-radius:50%;border:1.5px dashed var(--okline);display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:600;color:var(--acc)}
.wait{display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:var(--bg)}
.wait div:first-child{font-size:11px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.wait div:last-child{font-size:14px;line-height:1.5}
.steps{display:flex;justify-content:center;gap:8px}
.steps i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.steps i.on{background:var(--acc)}

/* ---- sign in: the O, one card */
.si-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 20px;gap:22px;position:relative;overflow:hidden}
.si-sky{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%,#1A2A48 0%,#0A1220 45%,var(--bg) 100%);z-index:0}
html[data-theme=light] .si-sky{background:linear-gradient(180deg,#EAF2FB 0%,var(--bg) 70%)}
@media (prefers-color-scheme:light){html:not([data-theme]) .si-sky{background:linear-gradient(180deg,#EAF2FB 0%,var(--bg) 70%)}}
.si-shell>*{position:relative;z-index:1}
.si-word{font-size:12px;letter-spacing:.34em;font-weight:600}
.si-o{width:150px;height:150px}
.si-title{margin:0;font-size:22px;text-align:center}
.si-sub{margin:0;font-size:13px;color:var(--mute);text-align:center;max-width:420px;line-height:1.5}
.si-shell .card{margin:0}
.si-foot{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-size:11px;color:var(--faint);padding-top:10px}
.si-foot a{color:var(--mute);text-decoration:none}
.si-foot .seg{margin-left:6px}

/* ---- the cabin (Manage my ARC) */
.needs{display:flex;flex-direction:column;gap:10px}
.needs-head{display:flex;justify-content:space-between;align-items:baseline}
.needs-head h2{margin:0;font-size:11px;letter-spacing:.16em;color:var(--warm);font-weight:600;text-transform:uppercase}
.needs-head span{font-size:12px;color:var(--faint)}
.need{display:flex;flex-wrap:wrap;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--warm);border-radius:12px;padding:12px 16px}
.need .from{font-size:10px;letter-spacing:.14em;color:var(--mute);width:84px;text-transform:uppercase}
.need .text{flex:1 1 320px;font-size:14px}
.need .two{display:flex;gap:8px}
.need .yes{min-height:36px;padding:0 16px;border-radius:10px;border:0;background:var(--acc);color:var(--ink);font-size:13px;font-weight:600;cursor:pointer}
.need .no{min-height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--btn2);font-size:13px;cursor:pointer}
.clear{font-size:13px;color:var(--mute);padding:12px 16px;border:1px dashed var(--line);border-radius:12px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mcard{display:flex;flex-direction:column;gap:8px;padding:16px 18px;min-height:128px}
.mcard .row1{display:flex;justify-content:space-between;align-items:center}
.mcard .name{font-size:11px;letter-spacing:.14em;color:var(--mute)}
.mcard .when{font-size:11px;color:var(--faint)}
.mcard .big{font-size:30px;font-weight:600;letter-spacing:-.02em}
.mcard .line{font-size:13px;color:var(--soft);line-height:1.45}
.keeper{display:flex;flex-direction:column;gap:14px;padding:16px 18px}
.keeper-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.keeper-row .t{display:flex;flex-direction:column;gap:4px}
.keeper-row .t div:first-child{font-size:11px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.keeper-row .t div:last-child{font-size:13px;color:var(--soft)}
.keeper-row .b{display:flex;gap:8px;flex-wrap:wrap}
.keeper .t div:first-child{font-size:11px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.panel{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.prow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;font-size:13px;padding:8px 0;border-bottom:1px solid var(--line)}
.prow span{color:var(--soft)}
.bigcode{font-size:32px;font-weight:600;letter-spacing:.14em;color:var(--acc)}
.phone-note{display:none;font-size:12px;color:var(--faint);text-align:center}

/* ---- Sphere · live */
.live{max-width:640px;width:100%;display:flex;flex-direction:column;gap:14px}
.live-head{display:flex;align-items:center;justify-content:space-between}
.live-head h1{margin:0;font-size:22px}
.watching{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mute)}
.watching::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.tiles{display:flex;flex-direction:column;gap:10px}
.tile{display:flex;flex-direction:column;overflow:hidden}
.tile.on{border-color:var(--okline)}
.screen{aspect-ratio:16/9;min-height:150px;background:var(--bg);display:flex;align-items:center;justify-content:center;position:relative}
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.badge{position:absolute;top:10px;left:10px;font-size:11px;font-weight:600;letter-spacing:.08em;background:#D23B4A;color:#FFFFFF;border-radius:6px;padding:4px 8px}
.play{width:64px;height:64px;border-radius:50%;border:0;background:var(--fg);color:var(--bg);display:flex;align-items:center;justify-content:center;cursor:pointer}
.noton{font-size:13px;color:var(--mute)}
.tile-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 14px}
.tile-foot b{display:block;font-size:14px;font-weight:600}
.tile-foot span{font-size:12px;color:var(--mute)}
.tile-foot .state{font-size:12px;color:var(--faint)}
.tile.on .tile-foot .state{color:var(--ok)}
.pair{display:flex;gap:10px}
.mini{flex:1;display:flex;flex-direction:column;gap:4px;padding:12px 14px;text-decoration:none;color:var(--fg)}
.mini .w{font-size:11px;color:var(--mute)}
.mini b{font-size:14px;font-weight:600}
.mini .l{font-size:12px;color:var(--mute)}
.mini .l.go{color:var(--acc)}
.rules{display:flex;flex-direction:column;gap:8px;padding:12px 14px}
.rules p{margin:0;font-size:13px;line-height:1.5;color:var(--soft)}
.people{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 10px 5px 5px;font-size:12px}
.chip i{width:22px;height:22px;border-radius:50%;background:var(--line);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;font-style:normal;color:var(--acc)}

/* ---- the phone width: the rail becomes a row of rooms under the top bar */
@media (max-width:760px){
  .shell{grid-template-columns:minmax(0,1fr);grid-template-rows:56px auto minmax(0,1fr) 54px;grid-template-areas:"top" "rail" "room" "line"}
  .rail{flex-direction:row;align-items:center;gap:2px;padding:6px 8px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto}
  .rail .brand,.rail .k,.rail .rail-foot{display:none}
  .rail a.room{margin:0;padding:7px 12px;white-space:nowrap}
  .topbar{padding:0 14px;gap:10px}
  .topbar .who span:first-child{display:none}
  .room-main{padding:16px 14px 24px;gap:14px}
  .cards{grid-template-columns:1fr;gap:8px}
  .mcard{display:grid;grid-template-columns:54px minmax(0,1fr);grid-template-areas:"big name" "big line";column-gap:14px;row-gap:0;align-items:center;padding:12px 14px;min-height:60px}
  .mcard .row1{display:contents}
  .mcard .when{display:none}
  .mcard .big{grid-area:big;font-size:22px}
  .mcard .name{grid-area:name}
  .mcard .line{grid-area:line;font-size:13px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .need{flex-direction:column;align-items:stretch;gap:10px;padding:12px 14px}
  .need .from{display:none}
  .need .text{flex:none}
  .need .yes,.need .no{flex:1;min-height:44px;font-size:14px}
  .keeper{display:none}
  .phone-note{display:block}
  .sayline{padding:0 14px}
  .foot-note{display:none}
  .card{padding:20px;max-width:none}
  .si-o{width:120px;height:120px}
}

/* ---- the rest of the cabin (2 Nov 2026): Worlds · Vessels · Tools · Aboard · Devices · Settings */
.pane{background:var(--panel);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;gap:14px;padding:16px 18px}
.pane .t div:first-child{font-size:11px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.pane .t div:last-child{font-size:13px;color:var(--soft)}
.pane .t{display:flex;flex-direction:column;gap:4px}
.prow .name{color:var(--fg);font-weight:600}
.prow .sub{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.prow .acts{display:flex;gap:8px;flex-wrap:wrap}
.prow .state{font-size:12px;color:var(--faint)}
.prow .state.on{color:var(--ok)}
.prow .state.pend{color:var(--warm)}
.pick{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--soft)}
.pick.off{color:var(--faint)}
.pick input{accent-color:var(--acc)}
.set-head{font-size:11px;letter-spacing:.16em;color:var(--mute);text-transform:uppercase;padding:14px 0 4px}
.set-head:first-child{padding-top:0}
.yes-no{font-size:12px;color:var(--mute)}
.yes-no.on{color:var(--ok)}
/* the table: an oval, the cards around it */
.table-wrap{position:relative;width:100%;max-width:820px;aspect-ratio:2/1;margin:8px auto 4px;min-height:260px}
.table-wrap .oval{position:absolute;left:18%;top:26%;width:64%;height:48%;border-radius:50%;border:1px solid var(--line);background:radial-gradient(ellipse at 50% 40%,rgba(143,227,255,.08),transparent 70%)}
.seatcard{position:absolute;width:118px;margin-left:-59px;margin-top:-28px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;text-decoration:none;color:var(--fg)}
.seatcard .ini{width:34px;height:34px;font-size:13px}
.seatcard.kpr .ini{border:1.5px solid var(--acc)}
.seatcard .n{font-size:12px;font-weight:600;max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seatcard .v{font-size:11px;color:var(--mute);max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seatcard.empty .ini{background:transparent;border:1.5px dashed var(--okline);color:var(--acc)}
.seatcard.empty .n{color:var(--acc)}
.seatcard.me .ini{background:var(--acc);color:var(--ink)}
.branch{padding-left:0;margin:0;list-style:none}
.branch .branch{padding-left:18px;border-left:1px solid var(--line);margin-left:8px}
.branch li{padding:6px 0;font-size:13px}
.branch li .when{font-size:12px;color:var(--faint);margin-left:6px}
@media (max-width:760px){
  .table-wrap{aspect-ratio:1/1.1;max-width:none;min-height:320px}
  .table-wrap .oval{left:20%;top:24%;width:60%;height:52%}
  .seatcard{width:92px;margin-left:-46px}
  .seatcard .n,.seatcard .v{max-width:92px}
}

/* ---- the ships (3 Nov 2026): Rooms, six tiles (sheetE "The ships"), and a room's folder */
.rooms-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rtile{display:flex;flex-direction:column;gap:6px;min-height:118px;padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--fg)}
.rtile:hover{border-color:var(--acc)}
.rtile b{font-size:15px;font-weight:600}
.rtile .l{font-size:12px;color:var(--mute);line-height:1.45}
.rtile .n{margin-top:auto;font-size:11px;color:var(--faint)}
.walk-sum{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--soft);padding:2px 0 6px}
.walk-sum .neg{color:var(--warm)}
.walk-sum .pos{color:var(--ok)}
.live-elsewhere{font-size:14px;color:var(--soft);padding:14px 16px;border:1px dashed var(--line);border-radius:12px}
@media (max-width:760px){
  .rooms-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .rtile{min-height:96px;padding:12px 14px}
}