:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color-scheme:dark;font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-size:16px}
body[data-theme="dark"]{--bg:#10151b;--panel:#1a2028;--panel-2:#222933;--key:#252c35;--text:#f5f1e8;--muted:#b5bdc4;--faint:#82909c;--line:#3d4851;--gold:#d6ad65;--orange:#ed9c47;--teal:#7ec5c6;--shadow:rgba(0,0,0,.42);color-scheme:dark}
body[data-theme="light"]{--bg:#f2efe8;--panel:#fffdf7;--panel-2:#ede9e0;--key:#f8f6ef;--text:#20262b;--muted:#566068;--faint:#727d83;--line:#cac5b9;--gold:#926b30;--orange:#b76619;--teal:#276d73;--shadow:rgba(32,25,13,.13);color-scheme:light}
button,input,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.55}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--teal)!important;outline-offset:3px}
.skip-link{position:fixed;top:-100px;left:12px;z-index:100;background:var(--gold);color:var(--bg);padding:10px 14px}
.skip-link:focus{top:12px}
.overline{font-size:.7rem;font-weight:750;letter-spacing:.18em;color:var(--gold)}
.keyboard-open{overflow:hidden}
.keyboard-screen{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;min-height:0;background:radial-gradient(circle at 52% 35%,rgba(214,173,101,.07),transparent 38%),var(--bg);padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px,env(safe-area-inset-left))}
.keyboard-header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 8px 14px;border-bottom:1px solid var(--line)}
.keyboard-heading h1{font-size:clamp(1.45rem,3vw,2.3rem);line-height:1;margin:6px 0 4px;letter-spacing:-.055em}
.keyboard-heading p{margin:0;color:var(--muted);font-size:.82rem}
.logo-close{border:1px solid var(--gold);background:transparent;color:var(--gold);display:flex;align-items:center;gap:8px;border-radius:12px;padding:6px 10px;min-height:54px;font-size:.69rem;font-weight:750;letter-spacing:.12em;white-space:nowrap}
.logo-close:hover,.logo-close:focus-visible{background:rgba(214,173,101,.12)}
.logo-close svg{width:52px;height:39px}
.keyboard-compose{flex:none;padding:13px 8px 11px;border-bottom:1px solid var(--line)}
.keyboard-compose label{display:flex;align-items:center;gap:10px}
.local-badge{color:var(--faint);font-size:.63rem;letter-spacing:.1em}
.compose-row{display:flex;gap:8px;margin-top:8px;align-items:stretch}
.compose-row textarea{flex:1;min-width:0;height:56px;resize:none;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--text);font-size:1.25rem;line-height:1.25}
.compose-row textarea::placeholder{color:var(--faint);font-size:.87rem}
.copy-button,.solid-button{border:1px solid var(--gold);background:var(--gold);color:#15191c;border-radius:10px;padding:10px 18px;font-size:.8rem;font-weight:800;white-space:nowrap}
.copy-button:hover,.solid-button:hover{filter:brightness(1.12)}
.keyboard-tools{flex:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 8px 9px}
.keyboard-tools button,.outline-button{min-height:40px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);padding:8px 12px;font-size:.78rem;font-weight:700}
.keyboard-tools button:hover,.outline-button:hover{border-color:var(--gold)}
.keyboard-tools button[aria-pressed="true"]{border-color:var(--teal);color:var(--teal)}
.keyboard-tools p{margin:0 0 0 auto;font-size:.74rem;color:var(--muted);max-width:440px;text-align:right}
.keyboard-viewport{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 8px 8px;scrollbar-color:var(--gold) transparent}
.keyboard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));grid-auto-rows:minmax(83px,1fr);gap:8px;min-height:100%;align-content:stretch}
.symbol-key{position:relative;min-width:0;min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid var(--line);border-radius:10px;background:var(--key);color:var(--text);user-select:none;-webkit-user-select:none;touch-action:none;transition:border-color .18s,background .18s,box-shadow .18s}
.symbol-key:hover{border-color:var(--gold);background:var(--panel-2)}
.symbol-key .key-mark{font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Apple Symbols",sans-serif;font-size:clamp(1.85rem,3.2vw,2.7rem);line-height:1.1;font-weight:400}
.symbol-key .key-label{font-size:.64rem;color:var(--muted);line-height:1.1;letter-spacing:.02em;max-width:95%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.symbol-key[data-core="true"]{border-color:color-mix(in srgb,var(--gold) 55%,var(--line))}
.symbol-key[data-core="true"]::before{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--gold);top:7px;right:7px}
.symbol-key[data-key-id="orange"] .key-mark{color:var(--orange)}
.symbol-key[data-key-id="root"] .key-mark,.symbol-key[data-key-id="riverlink"] .key-mark{color:var(--gold)}
.symbol-key.is-selected{outline:2px solid var(--teal);outline-offset:-2px}
.symbol-key.drag-placeholder{border-style:dashed;opacity:.4}
.symbol-key.blank .key-mark{color:var(--faint);font-size:1.5rem}
.drag-ghost{position:fixed;z-index:70;pointer-events:none;width:90px;height:90px;transform:translate(-50%,-50%);box-shadow:0 16px 38px var(--shadow);border-color:var(--teal)!important;opacity:.94}
.keyboard-foot{flex:none;border-top:1px solid var(--line);padding:8px;display:flex;justify-content:space-between;gap:12px;color:var(--faint);font-size:.6rem;letter-spacing:.12em;font-weight:700}
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px;padding:12px clamp(20px,5vw,72px);background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.site-logo{display:flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none;font-weight:760;font-size:1rem;letter-spacing:-.04em}
.site-logo svg{width:38px;color:var(--gold)}
.logo-world{color:var(--gold);font-weight:450}
.site-header nav{display:flex;gap:clamp(12px,3vw,40px)}
.site-header nav a{text-decoration:none;text-transform:uppercase;font-size:.7rem;letter-spacing:.09em;font-weight:750}
.site-header nav a:hover{color:var(--gold)}
.theme-toggle{border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--text);padding:9px 14px;white-space:nowrap;font-size:.73rem;font-weight:700}
.keyboard-launch{position:fixed;right:18px;bottom:18px;z-index:35;min-height:50px;border:1px solid var(--gold);border-radius:99px;background:var(--panel);color:var(--gold);box-shadow:0 8px 30px var(--shadow);padding:10px 19px;font-weight:750;display:flex;align-items:center;gap:9px}
.keyboard-launch span:first-child{font-size:1.3rem}
.site-hero{position:relative;isolation:isolate;min-height:min(820px,calc(100svh - 78px));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 24px;overflow:hidden}
.hero-orbit{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-orbit span{position:absolute;left:50%;top:50%;width:min(85vw,830px);height:min(85vw,830px);border:1px solid color-mix(in srgb,var(--gold) 13%,transparent);border-radius:50%;transform:translate(-50%,-50%) rotate(35deg) scaleY(.55)}
.hero-orbit span:nth-child(2){transform:translate(-50%,-50%) rotate(-27deg) scaleY(.55)}
.hero-orbit span:nth-child(3){width:min(58vw,550px);height:min(58vw,550px);transform:translate(-50%,-50%) rotate(64deg) scaleY(.55)}
.hero-door{width:min(300px,65vw);color:var(--gold);margin:22px 0 -12px}
.hero-door svg{display:block;width:100%}
.site-hero h1{font-size:clamp(3rem,7.4vw,7rem);letter-spacing:-.07em;line-height:.99;margin:0;max-width:1100px}
.site-hero h1 em{font-style:normal;color:var(--gold)}
.site-hero>p:not(.overline){max-width:620px;color:var(--muted);line-height:1.7;font-size:1rem;margin:28px auto}
.text-link{color:var(--gold);font-size:.8rem;font-weight:760;letter-spacing:.04em;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:7px}
.public-section{padding:clamp(75px,10vw,140px) clamp(20px,6vw,90px);max-width:1600px;margin:auto;scroll-margin-top:90px}
.section-intro{max-width:800px;margin-bottom:35px}
.section-intro h2,.private-section h2{font-size:clamp(2.6rem,5.3vw,5.6rem);letter-spacing:-.065em;line-height:1.04;margin:14px 0 18px}
.section-intro>p:last-child{color:var(--muted);font-size:1.08rem;line-height:1.6;max-width:650px}
.sator-card,.orbit-card{display:grid;grid-template-columns:minmax(300px,1.1fr) minmax(250px,.9fr);gap:clamp(24px,6vw,80px);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,5vw,60px);box-shadow:0 20px 60px var(--shadow)}
.sator-display{position:relative;display:flex;align-items:center;justify-content:center;min-height:420px}
.sator-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);width:min(100%,440px);aspect-ratio:1;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.sator-cell{position:relative;display:grid;place-items:center;font-size:clamp(1.6rem,3.3vw,2.8rem);font-weight:650;letter-spacing:.04em;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel-2)}
.sator-cell:nth-child(5n){border-right:0}.sator-cell:nth-child(n+21){border-bottom:0}
.sator-cell.cross{color:var(--gold)}
.sator-cell.center{color:var(--text);isolation:isolate}
.sator-cell.center::before{content:"";position:absolute;width:75%;aspect-ratio:1;border:3px solid var(--orange);border-radius:50%;z-index:-1;box-shadow:0 0 24px color-mix(in srgb,var(--orange) 28%,transparent)}
.sator-cell.center::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--orange);right:15%;top:15%}
.sator-grid.is-settling .sator-cell{animation:sator-settle .85s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--cell-index) * 21ms)}
@keyframes sator-settle{from{transform:translate(var(--scatter-x),var(--scatter-y)) rotate(var(--scatter-rot));opacity:.08;filter:blur(6px)}to{transform:translate(0,0) rotate(0);opacity:1;filter:blur(0)}}
.axis{position:absolute;background:var(--orange);opacity:.18;pointer-events:none}.axis.horizontal{height:1px;width:100%;top:50%}.axis.vertical{width:1px;height:100%;left:50%}
.sator-detail{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.orange-mark{width:92px;height:92px;border:2px solid var(--orange);border-radius:50%;display:grid;place-items:center;margin:20px 0;color:var(--orange)}
.orange-mark span{width:11px;height:11px;border-radius:50%;background:currentColor}
.sator-detail h3{font-size:clamp(1.7rem,3vw,2.7rem);line-height:1.08;letter-spacing:-.04em;margin:4px 0 12px}
.sator-detail>p:not(.source-note){color:var(--muted);line-height:1.65}
.sator-detail .outline-button{margin-top:17px;border-color:var(--gold);color:var(--gold);padding:12px 17px}
.source-note{color:var(--faint);font-size:.8rem;line-height:1.5;margin-top:24px}
.orbit-card{grid-template-columns:minmax(260px,1fr) minmax(250px,1fr);align-items:center;min-height:460px}
.state-orbit{position:relative;width:min(360px,90%);aspect-ratio:1;margin:auto}
.orbit-ring{position:absolute;inset:12%;border:1px dashed var(--gold);border-radius:50%;opacity:.7}
.orbit-center{position:absolute;inset:39%;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:3rem;background:var(--panel)}
.orbit-node{position:absolute;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);font-weight:750;color:var(--gold)}
.node-hold{left:calc(50% - 29px);top:0}.node-carry{right:0;top:calc(50% - 29px)}.node-turn{left:calc(50% - 29px);bottom:0}.node-return{left:0;top:calc(50% - 29px)}
.orbit-trace{position:absolute;inset:11%;border-radius:50%;border:2px solid transparent;border-top-color:var(--teal);animation:orbit-spin 13s linear infinite}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
.orbit-copy ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.orbit-copy li{border-bottom:1px solid var(--line);padding:15px 4px;display:flex;align-items:baseline;gap:14px}.orbit-copy b{color:var(--gold);font-size:.8rem}.orbit-copy span{font-size:1.35rem}
.math-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.math-grid article{background:var(--panel);border:1px solid var(--line);padding:clamp(24px,4vw,44px);border-radius:16px;min-height:230px}
.math-label{display:block;color:var(--gold);font-size:.7rem;font-weight:750;letter-spacing:.17em;margin-bottom:24px}
.math-grid strong{display:block;font-size:clamp(1.7rem,3.4vw,3rem);letter-spacing:-.05em;font-weight:630;white-space:normal;overflow-wrap:anywhere}
.math-grid p{color:var(--muted);line-height:1.6;max-width:440px}
.scale-note{border-left:2px solid var(--gold);padding:10px 28px;margin-top:52px;max-width:800px}.scale-note p{font-size:clamp(1.25rem,2.4vw,2rem);line-height:1.45;letter-spacing:-.02em;margin-bottom:0}
.private-section{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:28px;align-items:center}.private-section>div:first-child{max-width:780px}.private-section p:last-child{color:var(--muted);line-height:1.6;font-size:1.05rem}.private-icon{font-size:clamp(7rem,18vw,18rem);color:var(--gold);opacity:.6}
.site-footer{border-top:1px solid var(--line);padding:30px clamp(20px,6vw,90px) 85px;display:flex;align-items:start;justify-content:space-between;gap:30px;color:var(--muted);font-size:.8rem}.site-footer span{font-weight:800;color:var(--text)}.site-footer p{max-width:500px;margin:0;line-height:1.55}.site-footer button{border:0;background:none;color:var(--gold);font-weight:750;padding:0}
dialog{border:1px solid var(--gold);border-radius:16px;background:var(--panel);color:var(--text);width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;box-shadow:0 28px 80px var(--shadow)}
dialog::backdrop{background:rgba(0,0,0,.72)}
dialog form{padding:22px}dialog .dialog-head{display:flex;align-items:start;justify-content:space-between;gap:12px}dialog h2{font-size:1.8rem;letter-spacing:-.04em;margin:5px 0 20px}dialog .dialog-head button{border:0;background:none;color:var(--text);font-size:2rem;line-height:1}
dialog label{display:block;font-size:.82rem;font-weight:700;margin:15px 0}dialog input{display:block;width:100%;min-height:48px;margin-top:7px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font-size:1rem}
dialog p:not(.overline){color:var(--muted);font-size:.8rem;line-height:1.5}dialog .dialog-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}
@media(max-width:850px){.site-header{flex-wrap:wrap;gap:8px}.site-header nav{order:3;width:100%;justify-content:space-between;border-top:1px solid var(--line);padding-top:10px}.site-header nav a{font-size:.65rem}.sator-card,.orbit-card{grid-template-columns:1fr}.sator-display{min-height:0}.sator-grid{width:min(100%,390px)}.sator-detail{align-items:flex-start}.orbit-card{gap:0}.state-orbit{width:min(300px,100%)}}
@media(max-width:620px){.keyboard-screen{padding-left:8px;padding-right:8px}.keyboard-header{padding:10px 6px}.keyboard-heading h1{font-size:1.45rem}.keyboard-heading p{font-size:.72rem;max-width:230px}.logo-close{padding:4px 7px;min-height:47px;gap:3px}.logo-close svg{width:42px}.logo-close>span{font-size:.55rem}.keyboard-compose{padding:8px 6px}.compose-row textarea{height:50px;font-size:1.05rem}.copy-button{padding:8px 11px;font-size:.7rem}.keyboard-tools{gap:5px;padding:7px 6px}.keyboard-tools button{min-height:36px;padding:6px 8px;font-size:.68rem}.keyboard-tools p{order:10;width:100%;max-width:none;text-align:left;margin:2px 0 0;font-size:.65rem}.keyboard-grid{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));grid-auto-rows:72px;gap:6px;min-height:0}.symbol-key{min-height:72px}.symbol-key .key-mark{font-size:1.9rem}.symbol-key .key-label{font-size:.58rem}.keyboard-foot{font-size:.5rem;padding:6px;line-height:1.35}.keyboard-foot span:last-child{text-align:right}.site-hero{min-height:calc(100svh - 112px);padding:60px 20px}.site-hero h1{font-size:clamp(2.8rem,13vw,4.8rem)}.public-section{padding:80px 20px;scroll-margin-top:120px}.sator-card,.orbit-card{padding:17px}.sator-cell{font-size:clamp(1.5rem,7vw,2.2rem)}.math-grid{grid-template-columns:1fr}.private-icon{display:none}.site-footer{flex-direction:column}.keyboard-launch{bottom:max(14px,env(safe-area-inset-bottom));right:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}