.portal { background: var(--color-bg); font-size: 1rem; --portal-muted:#62675f; --portal-sidebar:#eeeee8; --portal-error:#944621; }
[data-theme='dark'] .portal { --portal-muted:#a6b8af; --portal-sidebar:#111a16; --portal-error:#ffb293; }
/* Hosaka's walnut backdrop, shared by overview, settings, and Satori. */
.portal-main {
  --portal-wood-overlay:#f7f6f2d9;
  background-color:#15120f;
  background-image:linear-gradient(var(--portal-wood-overlay),var(--portal-wood-overlay)),url('/textures/dark-walnut.png');
  background-size:auto,1200px 800px;
  background-repeat:repeat;
}
[data-theme='dark'] .portal-main { --portal-wood-overlay:#080d1238; }
.portal .portal-theme-toggle { position:fixed; top:1rem; right:max(1.2rem,env(safe-area-inset-right)); width:44px; height:44px; z-index:110; color:var(--color-text); background:var(--color-surface-2); box-shadow:var(--shadow-sm); }
.portal-theme-toggle .theme-sun { display:none; }
[data-theme='dark'] .portal-theme-toggle .theme-sun { display:block; }
[data-theme='dark'] .portal-theme-toggle .theme-moon { display:none; }
.portal .portal-header,.portal .workspace-top { padding-right:5.5rem; }
[data-theme='light'] .portal .tool-feature { background:#e2eee5; color:#173b35; }
[data-theme='light'] .portal .tool-feature p,[data-theme='light'] .portal .tool-label,[data-theme='light'] .portal .satori-glimpse small { color:#3d5b50; }
[data-theme='light'] .portal .satori-glimpse span { color:#456c52; }
[data-theme='light'] .portal .satori-glimpse>div { border-color:#b8cebf; }
[data-theme='light'] .portal .tool-feature .portal-button { background:#01696f; color:#fff; }
[data-theme='dark'] .portal .sidebar-bottom>button { color:var(--color-text); }
@media(max-width:700px) { .portal-theme-toggle { top:.75rem; }.portal-sidebar>.logo { max-width:calc(100% - 3.5rem); }.portal .portal-header>.quiet-link { max-width:6rem; text-align:right; } }
.profile-form { max-width:540px; }.profile-form .portal-button { margin-top:1.5rem; }.setting-note { color:var(--portal-muted); font-size:.875rem; margin:.8rem 0; }.account-details { margin:2.5rem 0; max-width:540px; }.account-details h2 { font-size:1.3rem; margin-bottom:1rem; }.account-details dl>div { display:flex; justify-content:space-between; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--color-border); font-size:.9rem; }.account-details dt { color:var(--portal-muted); }
.portal-header,.portal-footer { display:flex; align-items:center; justify-content:space-between; padding:2rem 5vw; }
.portal-header .logo,.portal-sidebar .logo { --logo-size:2rem; }
.quiet-link,.portal-footer,.portal-footer a { font-size:.875rem; color:var(--portal-muted); }
.entry { min-height:calc(100dvh - 180px); max-width:1280px; margin:auto; padding:3rem 5vw 5rem; display:grid; grid-template-columns:1.15fr 1fr; gap:9%; align-items:center; }
.portal-kicker { font-size:.75rem; font-weight:700; letter-spacing:.15em; color:var(--color-primary); margin-bottom:1.25rem; }
.entry-story h1 { font-size:clamp(3rem,5.5vw,5.4rem); letter-spacing:-.055em; line-height:1.02; margin-bottom:1.8rem; }
.entry-intro { font-size:1.3rem; color:var(--portal-muted); line-height:1.65; }
.entry-tool { display:flex; align-items:center; gap:1rem; border-top:1px solid var(--color-border); padding-top:2rem; margin-top:3.5rem; }
.entry-tool p,.entry-foot { font-size:.875rem; color:var(--portal-muted); }.entry-foot { margin-top:2.5rem; }
.satori-mark { display:grid; place-items:center; background:#163e38; color:#acffda; width:3.4rem; height:3.4rem; border-radius:1rem; font-family:serif; font-size:1.8rem; flex-shrink:0; }
.entry-form { padding:2.5rem; background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:1.5rem; box-shadow:0 12px 40px #242b2110; }
.entry-form h2 { font-size:2rem; letter-spacing:-.04em; margin-bottom:.75rem; }.entry-form>p { color:var(--portal-muted); }.entry-form .portal-kicker { color:var(--color-primary); }
.entry-form form { margin-top:2rem; }.portal label { display:block; font-size:.875rem; font-weight:600; margin:.9rem 0 .45rem; }
.portal input,.portal select { width:100%; border:1px solid var(--color-border); border-radius:.55rem; padding:.8rem 1rem; background:var(--color-surface-2); color:var(--color-text); font:inherit; min-height:48px; }
.password-field { position:relative; }.password-field input { padding-right:4.5rem; }.password-field button { position:absolute; right:1rem; top:0; height:100%; border:0; background:none; color:var(--color-primary); cursor:pointer; font:inherit; font-size:.875rem; }
.portal-button { display:inline-flex; gap:2rem; align-items:center; justify-content:space-between; padding:.85rem 1.2rem; min-height:48px; background:#01696f; color:white; font:inherit; font-weight:600; border:0; border-radius:.55rem; cursor:pointer; }.portal-button:hover { background:#084e53; }.entry-form form>.portal-button { width:100%; margin-top:1.5rem; }
.portal :focus-visible { outline:3px solid #138ca0; outline-offset:4px; }.portal button:disabled { opacity:.6; cursor:wait; }.form-message { font-size:.875rem; margin-top:.8rem; color:var(--portal-error); }.entry-help { text-align:center; font-size:.875rem; margin-top:1.5rem; }.entry-help a { color:var(--color-primary); text-decoration:underline; text-underline-offset:3px; }
.preview-entry { display:grid; gap:.4rem; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--color-border); }.preview-entry>span { font-size:.75rem; color:var(--portal-muted); text-transform:uppercase; letter-spacing:.1em; }.preview-entry a { color:var(--color-primary); font-weight:600; font-size:.95rem; }.preview-entry small { color:var(--portal-muted); font-size:.8rem; }
.portal-shell { display:grid; grid-template-columns:248px minmax(0,1fr); min-height:100dvh; }.portal-sidebar { padding:2rem 1.5rem 1.5rem; display:flex; flex-direction:column; background:var(--portal-sidebar); border-right:1px solid var(--color-border); }.portal-sidebar>.logo { margin-bottom:2.8rem; }.workspace-label { display:flex; align-items:center; gap:.65rem; padding:.8rem 0 1.5rem; }.workspace-label strong,.sidebar-bottom strong { display:block; font-size:.875rem; }.workspace-label small,.sidebar-bottom small { display:block; color:var(--portal-muted); font-size:.75rem; }.workspace-avatar,.member-avatar { width:2.3rem; height:2.3rem; border:1px solid var(--color-border); border-radius:.6rem; display:grid; place-items:center; background:var(--color-primary-highlight); font-size:.875rem; font-weight:700; flex-shrink:0; }
.portal-sidebar nav a { display:flex; gap:.8rem; align-items:center; font-size:.9rem; padding:.65rem .8rem; border-radius:.4rem; }.portal-sidebar nav a>span { width:1.2rem; font-size:1.15rem; text-align:center; }.portal-sidebar nav a[aria-current] { background:var(--color-primary-highlight); color:var(--color-primary); font-weight:700; }.nav-label { font-size:.7rem; letter-spacing:.12em; color:var(--portal-muted); margin:1.5rem .8rem .5rem; }.sidebar-bottom { display:flex; align-items:center; gap:.6rem; margin-top:auto; padding-top:4rem; }.sidebar-bottom>a,.sidebar-bottom>button { margin-left:auto; background:none; border:0; font:inherit; cursor:pointer; padding:.5rem; }
.portal-main { min-width:0; display:flex; flex-direction:column; }.workspace-top { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--color-border); padding:1.35rem 3rem; font-size:.8rem; color:var(--portal-muted); }.workspace-top span span { padding:0 .7rem; color:#9a9e95; }.preview-banner { display:flex; gap:1rem; align-items:center; padding:.65rem 3rem; font-size:.8rem; color:var(--color-primary); background:var(--color-primary-highlight); }.preview-banner a { margin-left:auto; text-decoration:underline; }.workspace-content { padding:3.5rem 3rem; max-width:1400px; width:100%; margin:0 auto; }.welcome-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:2.5rem; }.welcome-row h1 { font-size:clamp(2.1rem,3vw,3rem); letter-spacing:-.045em; margin-bottom:.7rem; }.welcome-row p:not(.portal-kicker) { color:var(--portal-muted); }.welcome-row time { font-size:.85rem; color:var(--portal-muted); }.welcome-row .portal-kicker { margin-bottom:.6rem; }
.tool-feature { background:#173b35; color:#edf7ed; display:grid; grid-template-columns:1.2fr 1fr; border-radius:1rem; overflow:hidden; min-height:340px; }.tool-feature-copy { padding:2.5rem; }.tool-label { display:flex; gap:.8rem; align-items:center; font-size:.7rem; letter-spacing:.12em; color:#b7d0c5; }.tool-label .satori-mark { background:#2b544a; width:2.5rem; height:2.5rem; font-size:1.5rem; border-radius:.6rem; }.tool-feature h2 { font-size:3rem; margin:1.3rem 0 .8rem; letter-spacing:-.04em; }.tool-feature p { color:#c3d5ca; max-width:34ch; margin-bottom:1.8rem; }.tool-feature .portal-button { background:#d1f3b9; color:#1d382a; min-width:170px; }.satori-glimpse { align-self:center; padding:2rem 2rem 2rem .5rem; }.satori-glimpse>div { display:grid; grid-template-columns:1.7rem 1fr; gap:.1rem .6rem; border-bottom:1px solid #3d5b50; padding:1.05rem .3rem; }.satori-glimpse span { grid-row:span 2; color:#95b79b; font-family:monospace; font-size:.75rem; padding-top:.25rem; }.satori-glimpse strong { font-weight:500; }.satori-glimpse small { color:#b7cabe; font-size:.8rem; }
.workspace-secondary { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-top:2.5rem; }.workspace-secondary h3 { font-size:1.2rem; margin-bottom:.6rem; }.workspace-secondary .portal-kicker { font-size:.7rem; margin-bottom:.7rem; }.workspace-secondary p:not(.portal-kicker) { font-size:.9rem; color:var(--portal-muted); }.settings-shortcut { display:flex; gap:1rem; align-items:center; border-top:1px solid var(--color-border); padding:1.5rem 0; }.settings-shortcut>span:first-child { font-size:1.8rem; color:var(--color-primary); }.settings-shortcut>span:last-child { margin-left:auto; }.workspace-footer { margin-top:auto; display:flex; justify-content:space-between; gap:1rem; padding:1.5rem 3rem; color:var(--portal-muted); font-size:.75rem; }
@media(max-width:1050px) { .entry { gap:5%; }.entry-form { padding:2rem; }.portal-shell { grid-template-columns:210px minmax(0,1fr); }.portal-sidebar { padding:1.5rem 1rem; }.workspace-content { padding:2.5rem 1.7rem; }.workspace-top,.preview-banner,.workspace-footer { padding-left:1.7rem; padding-right:1.7rem; }.tool-feature-copy { padding:2rem; }.tool-feature { grid-template-columns:1fr; }.satori-glimpse { display:flex; gap:1rem; padding:0 2rem 2rem; }.satori-glimpse>div { flex:1; }.workspace-secondary { gap:1.5rem; } }
@media(max-width:700px) { .portal-header { padding:1.5rem; }.portal-header .logo { --logo-size:1.6rem; }.entry { display:block; padding:1.5rem 1.5rem 3rem; }.entry-story h1 { font-size:3rem; }.entry-story h1 br { display:none; }.entry-intro { font-size:1.05rem; }.entry-intro br { display:none; }.entry-tool,.entry-foot { display:none; }.entry-form { margin-top:2rem; padding:1.5rem; }.portal-shell { display:block; }.portal-sidebar { border-right:0; border-bottom:1px solid var(--color-border); padding:1rem; }.portal-sidebar>.logo { margin-bottom:.8rem; --logo-size:1.6rem; }.workspace-label,.nav-label,.sidebar-bottom { display:none; }.portal-sidebar nav { display:flex; flex-wrap:wrap; }.portal-sidebar nav a { font-size:.85rem; padding:.5rem .7rem; }.portal-sidebar nav a:last-child { display:none; }.workspace-top { display:none; }.preview-banner { flex-wrap:wrap; gap:.2rem .7rem; padding:.6rem 1.2rem; }.preview-banner a { margin-left:0; }.workspace-content { padding:2rem 1.2rem; }.welcome-row { align-items:flex-start; }.welcome-row time { max-width:7rem; text-align:right; font-size:.75rem; }.workspace-secondary { grid-template-columns:1fr; gap:.5rem; }.tool-feature-copy { padding:1.5rem; }.satori-glimpse { padding:0 1.5rem 1.5rem; gap:.7rem; }.satori-glimpse>div { display:block; }.satori-glimpse span { display:block; }.satori-glimpse small { display:none; }.workspace-footer { padding:1.5rem 1.2rem; }.portal-footer { padding:1.5rem; } }