:root {
    color-scheme: dark;
    --bg: #171e1c;
    --panel: #202925;
    --text: #eeeede;
    --muted: #a9b1a4;
    --line: #3b443d;
    --accent: #d7dab0;
    --ink: #253028;
}
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f4f2e9;
    --panel: #eae9df;
    --text: #27362d;
    --muted: #677465;
    --line: #d4d8c9;
    --accent: #445c43;
    --ink: #f4f2e9;
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 30px;
}
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, "Malgun Gothic", sans-serif;
    font-size: 15px;
    line-height: 1.7;
}
a {
    color: inherit;
    text-decoration: none;
}
button,
input,
textarea,
select {
    font: inherit;
}
button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 11px 20px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}
button:hover,
a:hover {
    color: var(--accent);
}
button:disabled {
    opacity: 0.5;
    cursor: wait;
}
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 5px;
}
[v-cloak] {
    display: none;
}
.header {
    height: 108px;
    max-width: 1344px;
    margin: auto;
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 25px;
    font-weight: 700;
}
.brand img {
    width: 42px;
    height: 42px;
}
.brand small {
    display: block;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 3px;
}
.header nav {
    display: flex;
    gap: 35px;
    font-size: 14px;
}
.actions {
    display: flex;
    gap: 8px;
}
.quiet {
    border: 0;
    padding: 10px;
}
.hero,
.section,
footer {
    max-width: 1248px;
    margin: auto;
}
.hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    min-height: 660px;
    padding: 70px 0 100px;
}
.eyebrow {
    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 600;
    color: var(--accent);
    margin: 0 0 25px;
}
h1,
h2,
h3,
p {
    margin-top: 0;
}
h1 {
    font-family: Georgia, "Batang", serif;
    font-size: clamp(38px, 4.6vw, 65px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -3px;
    margin-bottom: 22px;
}
h1 em {
    font-style: normal;
    color: var(--accent);
}
.lead {
    color: var(--muted);
    line-height: 2;
    font-size: 15px;
    margin-bottom: 35px;
}
.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ink);
}
.primary:hover {
    color: var(--ink);
    filter: brightness(1.07);
}
.text-button {
    border: 0;
    padding-left: 0;
    padding-right: 0;
}
.hero .text-button {
    margin-left: 22px;
}
.hero-art {
    position: relative;
    text-align: center;
}
#taiji {
    width: 100%;
    min-height: 260px;
}
#taiji canvas {
    display: block;
    margin: auto;
    max-width: 100%;
    height: auto !important;
}
.art-label {
    font-family: Georgia, "Batang", serif;
    letter-spacing: 15px;
    font-size: 17px;
}
.art-label small {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--muted);
    margin-top: 12px;
}
.hero-bottom {
    position: absolute;
    bottom: 25px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 2px;
}
.hero-bottom a {
    font-size: 24px;
}
.section {
    padding: 85px 0;
    border-top: 1px solid var(--line);
}
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 35px;
}
.section-head h2 {
    font-size: 29px;
    font-weight: 400;
    letter-spacing: -1px;
    margin: 0;
}
.section-head .eyebrow {
    margin-bottom: 15px;
}
.section-head > p {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
}
.practice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.practice-grid article {
    padding: 28px 30px;
    background: var(--panel);
    border: 1px solid var(--line);
}
.number {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 2px;
}
.practice-symbol {
    font-family: Georgia, serif;
    font-size: 65px;
    color: var(--accent);
    height: 130px;
    display: flex;
    align-items: center;
}
.practice-grid h3 {
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 12px;
}
.practice-grid p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.9;
}
.practice-grid button {
    font-size: 12px;
    margin-top: 10px;
}
.tabs {
    display: flex;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px;
}
.tabs button {
    border: 0;
    font-size: 13px;
    color: var(--muted);
}
.tabs .selected {
    background: var(--accent);
    color: var(--ink);
}
.empty {
    text-align: center;
    padding: 45px 15px;
    color: var(--muted);
}
.empty > span {
    font-size: 45px;
    color: var(--accent);
}
.empty h3 {
    font-size: 17px;
    font-weight: 400;
    color: var(--text);
    margin: 10px;
}
.empty p {
    font-size: 13px;
}
.post-row {
    width: 100%;
    text-align: left;
    justify-content: initial;
    padding: 24px 8px;
    border: 0;
    border-bottom: 1px solid var(--line);
    gap: 25px;
}
.post-row strong {
    flex: 1;
    font-weight: 400;
    overflow-wrap: anywhere;
}
.tag {
    font-size: 11px;
    color: var(--accent);
}
.post-row time {
    font-size: 11px;
    color: var(--muted);
}
.about {
    text-align: center;
    background: radial-gradient(ellipse at center, var(--panel), transparent 65%);
}
.about h2 {
    font-family: Georgia, "Batang", serif;
    font-size: 38px;
    font-weight: 400;
    line-height: 1.6;
}
.about > p:not(.eyebrow) {
    color: var(--muted);
}
.about button {
    margin-top: 20px;
}
footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--line);
    padding: 35px 0;
    font-size: 12px;
    color: var(--muted);
}
footer .brand {
    font-size: 18px;
}
footer .brand small {
    letter-spacing: 0;
    font-size: 11px;
}
footer p {
    margin: 0;
}
dialog {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 45px;
    width: min(600px, calc(100% - 24px));
    max-height: 90vh;
}
dialog::backdrop {
    background: #000a;
    backdrop-filter: blur(6px);
}
dialog h2 {
    font-size: 26px;
    line-height: 1.5;
    padding-right: 15px;
}
dialog > p {
    color: var(--muted);
}
.dialog-close {
    position: absolute;
    right: 12px;
    top: 8px;
    font-size: 20px;
}
label {
    display: block;
    font-size: 13px;
    margin: 18px 0;
}
input,
textarea,
select {
    display: block;
    width: 100%;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--line);
    padding: 12px;
    margin-top: 6px;
    border-radius: 3px;
}
textarea {
    resize: vertical;
}
.hint {
    font-size: 12px;
    color: var(--muted);
}
.error {
    color: #ec9e90;
    font-size: 13px;
    white-space: pre-wrap;
}
.post-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 2;
    margin-top: 30px;
}
.member-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
}
.member-row small {
    display: block;
    color: var(--muted);
    font-size: 11px;
}
.member-row button {
    font-size: 12px;
    padding: 5px 10px;
}
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--ink);
    padding: 12px 24px;
    border-radius: 5px;
}
.skip {
    position: absolute;
    top: -100px;
}
.skip:focus {
    top: 0;
    z-index: 100;
    background: var(--bg);
    padding: 10px;
}
@media (max-width: 1350px) {
    .hero,
    .section,
    footer {
        margin-left: 48px;
        margin-right: 48px;
    }
}
@media (max-width: 700px) {
    .header {
        height: 84px;
        padding: 0 22px;
    }
    .header nav {
        display: none;
    }
    .header .brand {
        font-size: 21px;
    }
    .header .actions button {
        font-size: 12px;
        padding: 8px 10px;
    }
    .hero,
    .section,
    footer {
        margin-left: 24px;
        margin-right: 24px;
    }
    .hero {
        grid-template-columns: 1fr;
        padding: 8px 0 65px;
        gap: 22px;
        min-height: auto;
    }
    .hero-copy { text-align: center; }
    .hero .eyebrow { margin-bottom: 14px; }
    .hero .lead { font-size: 14px; margin-bottom: 22px; }
    #taiji { min-height: 0; aspect-ratio: 1; }
    .art-label { display: block; margin-top: 4px; }
    .hero h1 {
        font-size: clamp(32px, 8.5vw, 40px);
        letter-spacing: -2px;
    }
    .hero-art {
        grid-row: 1;
        max-width: 310px;
        width: 100%;
        margin: auto;
    }
    .hero .text-button {
        margin-left: 12px;
        font-size: 13px;
    }
    .hero-bottom {
        font-size: 9px;
        letter-spacing: 0;
    }
    .section {
        padding: 50px 0;
    }
    .section-head {
        align-items: start;
        gap: 20px;
    }
    .section-head h2 {
        font-size: 24px;
    }
    .section-head > p {
        display: none;
    }
    .practice-grid {
        grid-template-columns: 1fr;
    }
    .practice-grid article {
        position: relative;
        padding: 25px;
    }
    .practice-symbol {
        position: absolute;
        right: 30px;
        top: 20px;
        height: auto;
        font-size: 50px;
    }
    .practice-grid h3 {
        margin-top: 20px;
    }
    .tabs {
        gap: 3px;
    }
    .tabs button {
        padding: 9px 12px;
    }
    .post-row {
        gap: 12px;
        flex-wrap: wrap;
    }
    .post-row time {
        display: none;
    }
    .about h2 {
        font-size: 31px;
    }
    footer {
        flex-wrap: wrap;
        gap: 20px;
    }
    footer p {
        order: 3;
        width: 100%;
    }
    dialog {
        padding: 35px 24px;
    }
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
}
.install-steps {
    padding-left: 24px;
}
.install-steps li {
    margin: 16px 0;
}

/* Blog-style writing and reading, matching the existing Doga theme. */
dialog.writing-dialog { width: min(860px, calc(100vw - 32px)); max-width: 860px; }
.rich-editor { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 10px 0 16px; }
.editor-toolbar { display:flex; flex-wrap:wrap; gap:5px; padding:10px; border-bottom:1px solid var(--line); }
.editor-toolbar button { padding:6px 10px; font-size:12px; border-radius:6px; }
.editor-body { min-height:300px; padding:20px; outline:none; cursor:text; }
.editor-body:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.editor-body:empty:before { content:attr(data-placeholder); opacity:.5; pointer-events:none; }
.rich-editor > .hint { padding:0 16px 12px; font-size:12px; }
.post-rich { line-height:1.9; overflow-wrap:anywhere; white-space:normal; }
.post-rich p,.post-rich div { margin:0 0 1em; }
.post-rich img { display:block; max-width:100%; height:auto; border-radius:8px; margin:16px auto; }
.post-rich h2 { font-size:1.6em; margin:1.3em 0 .6em; }
.post-rich h3 { font-size:1.25em; margin:1.2em 0 .5em; }
.post-rich blockquote { margin:20px 0; padding:8px 18px; border-left:3px solid currentColor; opacity:.85; }
.post-rich ul,.post-rich ol { padding-left:28px; }
.post-rich a { text-decoration:underline; }
.post-rich pre { white-space:pre-wrap; padding:12px; border:1px solid var(--line); }
@media(max-width:640px) { dialog.writing-dialog { width:100%; max-width:100%; height:100dvh; max-height:100dvh; margin:0; border-radius:0; padding:48px 16px 24px; } .editor-body { min-height:38dvh; padding:14px; font-size:16px; } .editor-toolbar button { min-height:38px; } }

.rich-editor input[hidden] { display:none; }
body:has(dialog[open]) { overflow:hidden; }

.post-actions { display:flex;gap:10px;margin:16px 0 24px;padding-bottom:16px;border-bottom:1px solid var(--line); }
.tabs { flex-wrap:wrap; }
.official-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px; }
.official-grid button { text-align:left;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:12px; }
.official-grid strong,.official-grid span { display:block; }.official-grid strong { font-size:20px;margin-bottom:12px; }.official-grid span { font-size:13px;color:var(--muted); }
.post-video { margin:24px 0; }.post-video iframe { display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:10px;background:#111; }.post-video a { display:block;margin-top:8px;font-size:13px;text-decoration:underline; }

.post-tags { display:flex;flex-wrap:wrap;gap:8px;color:var(--muted); }.post-tags span { padding:3px 10px;border:1px solid var(--line);border-radius:20px; }.public-page { max-width:900px;margin:0 auto;padding:32px 20px; }.public-page article { margin:32px 0; }.public-page h1 { overflow-wrap:anywhere; }.public-page .post-row { display:flex;text-decoration:none; }.public-nav { display:flex;gap:20px;flex-wrap:wrap; }.public-nav a { text-decoration:underline; }

/* Public homepage: editorial stories and one centrally maintained visit section. */
.hero-note { color:var(--muted);font-size:12px;letter-spacing:.06em;margin-top:24px; }
.practice-invite { display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;border-top:1px solid var(--line); }
.practice-invite h2 { font-size:clamp(26px,3vw,42px);line-height:1.45;letter-spacing:-1.5px; }.practice-invite em { color:var(--accent);font-style:normal; }.practice-invite p { color:var(--muted); }.practice-invite .button { margin-top:16px; }
.first-steps { list-style:none;margin:0;padding:0; }.first-steps li { display:flex;gap:22px;align-items:start;padding:22px 0;border-bottom:1px solid var(--line); }.first-steps li>span { color:var(--accent);font-size:24px; }.first-steps p { margin:6px 0 0;font-size:14px; }
.featured-practice { position:relative;display:block;overflow:hidden;border-radius:20px;background:var(--panel);aspect-ratio:4/3; }.featured-practice img { width:100%;height:100%;object-fit:cover; }.featured-caption { position:absolute;inset:auto 0 0;padding:48px 24px 24px;background:linear-gradient(transparent,rgba(0,0,0,.9));color:white; }.featured-caption small,.featured-caption strong { display:block; }.featured-caption strong { margin-top:8px;font-size:21px; }
.story-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px; }.story-card { display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:16px;transition:transform .18s,border-color .18s; }.story-card:hover { transform:translateY(-4px);border-color:var(--accent); }.story-card:focus-visible { outline:2px solid var(--accent);outline-offset:4px; }.story-cover { aspect-ratio:16/10;position:relative;overflow:hidden; }.story-cover img { width:100%;height:100%;object-fit:cover; }.play-mark { position:absolute;bottom:14px;right:14px;padding:8px 14px;border-radius:30px;background:rgba(0,0,0,.75);color:white; }.story-copy { padding:24px;flex:1;display:flex;flex-direction:column; }.story-copy h3 { margin:16px 0 10px;font-size:21px;line-height:1.5;overflow-wrap:anywhere; }.story-copy>p { margin:0 0 24px;color:var(--muted);font-size:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }.story-foot { display:flex;justify-content:space-between;gap:10px;margin-top:auto;font-size:12px;color:var(--muted); }.text-story { border-top:3px solid var(--accent);min-height:245px; }
.visit-section { border-top:1px solid var(--line);scroll-margin-top:24px; }.visit-section .section-head h2 { font-size:clamp(32px,4vw,52px);line-height:1.3;letter-spacing:-2px; }.visit-heading { display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:32px; }.visit-heading>p { color:var(--muted); }.visit-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }.visit-grid article { min-width:0;padding:28px;border-radius:14px;border:1px solid var(--line);background:var(--panel); }.visit-number { color:var(--muted);font-size:12px;letter-spacing:.15em; }.visit-grid h3 { margin:12px 0 18px;font-size:22px; }.visit-grid .post-rich { font-size:14px; }.visit-grid a { display:inline-block;padding:9px 14px;margin:4px 0;border:1px solid var(--line);border-radius:8px;text-decoration:none; }.visit-grid ul { padding-left:18px; }.visit-grid a:hover { border-color:var(--accent); }.post-visit-link { border-top:1px solid var(--line);padding-top:20px; }
@media(max-width:900px) { .story-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .practice-invite { grid-template-columns:1fr;gap:24px; }.story-grid,.visit-grid { grid-template-columns:1fr; }.visit-heading { align-items:stretch;flex-direction:column;gap:12px; }.visit-heading .button { text-align:center; }.visit-grid article { padding:22px; }.community .section-head { flex-wrap:wrap; }.story-copy { padding:22px; } }
@media(prefers-reduced-motion:reduce) { .story-card { transition:none; }.story-card:hover { transform:none; } }

.channel-section { display:flex;align-items:center;justify-content:space-between;gap:32px;border-top:1px solid var(--line); }.channel-section h2 { font-size:clamp(28px,3vw,40px);line-height:1.4;margin:12px 0; }.channel-section p { color:var(--muted); }.channel-links { display:grid;gap:12px; }.channel-links a { display:block;padding:20px 24px;border:1px solid var(--line);border-radius:12px;background:var(--panel); }.channel-links a:hover { border-color:var(--accent); }.public-channels { margin-top:36px;padding-top:24px;border-top:1px solid var(--line); }footer { flex-wrap:wrap; }@media(max-width:700px){.channel-section { flex-direction:column;align-items:stretch; }.channel-links a { padding:18px; }}