:root {
    --kt-washitsu-ink:#1f2b34;
    --kt-washitsu-muted:#5f564b;
    --kt-washitsu-indigo:#214f70;
    --kt-washitsu-beni:#a73c49;
    --kt-washitsu-paper:#fffaf0;
    --kt-washitsu-paper-soft:#f7efdf;
    --kt-washitsu-wall:#d8ceb1;
    --kt-washitsu-tatami:#c8c49c;
    --kt-washitsu-wood:#7b4e2f;
    --kt-washitsu-line:#cfb88f;
    --kt-washitsu-shadow:rgba(74,55,35,.10);
    --kt-font-heading:"IBM Plex Sans","Noto Sans JP",sans-serif;
    --kt-font-body:"IBM Plex Sans","Noto Sans JP",sans-serif;
}

body[data-page-design="washitsu"],
body.kt-washitsu {
    color:var(--kt-washitsu-ink);
    font-family:var(--kt-font-body);
    background:
        linear-gradient(90deg,rgba(76,58,37,.028) 0 1px,transparent 1px 100%),
        linear-gradient(180deg,var(--kt-washitsu-paper-soft) 0%,#fbf7ed 42%,#e8dfc4 100%) !important;
    background-size:89px 89px,auto;
    min-height:100vh;
    overflow-x:hidden;
    position:relative;
    isolation:isolate;
}

body[data-page-design="washitsu"]::before,
body.kt-washitsu::before {
    content:"";
    position:fixed;
    inset:70px 0 0;
    z-index:0;
    pointer-events:none;
    background:
        linear-gradient(180deg,rgba(255,250,239,.78),rgba(255,250,239,0) 36%),
        repeating-linear-gradient(90deg,rgba(255,255,255,.34) 0 72px,rgba(95,76,54,.08) 72px 75px,rgba(255,255,255,.2) 75px 146px),
        linear-gradient(90deg,rgba(123,78,47,.28) 0 14px,transparent 14px calc(100% - 14px),rgba(123,78,47,.25) calc(100% - 14px)),
        radial-gradient(circle at 86% 19%,rgba(104,139,106,.18),transparent 24%),
        linear-gradient(180deg,transparent 0 58%,rgba(200,196,156,.44) 58% 100%),
        repeating-linear-gradient(90deg,rgba(123,78,47,.16) 0 3px,transparent 3px 98px),
        repeating-linear-gradient(0deg,transparent 0 87px,rgba(91,70,44,.16) 87px 91px);
    opacity:.92;
}

body[data-page-design="washitsu"]::after,
body.kt-washitsu::after {
    content:"";
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:clamp(82px,14vh,150px);
    z-index:0;
    pointer-events:none;
    background:
        linear-gradient(90deg,transparent 0 10%,rgba(123,78,47,.18) 10% 10.6%,transparent 10.6% 44%,rgba(123,78,47,.16) 44% 44.6%,transparent 44.6% 76%,rgba(123,78,47,.16) 76% 76.6%,transparent 76.6%),
        linear-gradient(180deg,rgba(200,196,156,.18),rgba(185,178,131,.5));
    border-top:1px solid rgba(91,70,44,.16);
}

body[data-page-design="washitsu"] > header,
body[data-page-design="washitsu"] > main,
body[data-page-design="washitsu"] > footer,
body[data-page-design="washitsu"] > .view-panel,
body.kt-washitsu > header,
body.kt-washitsu > main,
body.kt-washitsu > footer,
body.kt-washitsu > .view-panel {
    position:relative;
    z-index:1;
}

body[data-page-design="washitsu"] h1,
body[data-page-design="washitsu"] h2,
body[data-page-design="washitsu"] h3,
body.kt-washitsu h1,
body.kt-washitsu h2,
body.kt-washitsu h3 {
    font-family:var(--kt-font-heading);
    font-weight:500;
    letter-spacing:.01em;
    color:#283b35;
    text-shadow:none;
}

body[data-page-design="washitsu"] .zen-header,
body.kt-washitsu .zen-header {
    background:rgba(255,250,240,.94) !important;
    border-bottom:1px solid rgba(87,63,37,.2);
    box-shadow:0 5px 18px rgba(68,54,40,.045);
    z-index:40 !important;
}

body[data-page-design="washitsu"] .brand-logo,
body.kt-washitsu .brand-logo {
    color:var(--kt-washitsu-indigo);
    font-family:var(--kt-font-heading);
    font-weight:600;
    text-shadow:none;
}

body[data-page-design="washitsu"] .brand-logo span,
body.kt-washitsu .brand-logo span {
    color:var(--kt-washitsu-beni);
    font-weight:400;
}

body[data-page-design="washitsu"] .nav-item,
body[data-page-design="washitsu"] .nav-group-trigger,
body.kt-washitsu .nav-item,
body.kt-washitsu .nav-group-trigger {
    color:#655b50;
    font-weight:600;
}

body[data-page-design="washitsu"] .nav-group-menu,
body.kt-washitsu .nav-group-menu {
    border-color:rgba(72,54,39,.16);
    background:rgba(255,250,239,.97);
    box-shadow:0 16px 32px rgba(68,54,40,.14);
    z-index:45;
}

body[data-page-design="washitsu"] .nav-group-menu .nav-item:hover,
body[data-page-design="washitsu"] .nav-group-menu .nav-item.active,
body.kt-washitsu .nav-group-menu .nav-item:hover,
body.kt-washitsu .nav-group-menu .nav-item.active {
    color:#7d3040;
    background:#f4e3d3;
}

body[data-page-design="washitsu"] .nav-shop,
body.kt-washitsu .nav-shop {
    color:#fff8e9;
    background:#283b35 !important;
}

body[data-page-design="washitsu"] main,
body.kt-washitsu main {
    font-family:var(--kt-font-body);
}

body[data-page-design="washitsu"] .view-panel,
body[data-page-design="washitsu"] main:not(.washitsu-page),
body[data-page-design="washitsu"] .home-container,
body[data-page-design="washitsu"] .dashboard-container,
body[data-page-design="washitsu"] .intro,
body[data-page-design="washitsu"] .path,
body.kt-washitsu .view-panel,
body.kt-washitsu main:not(.washitsu-page),
body.kt-washitsu .home-container,
body.kt-washitsu .dashboard-container,
body.kt-washitsu .intro,
body.kt-washitsu .path {
    position:relative;
}

body[data-page-design="washitsu"] .view-panel.active-view,
body[data-page-design="washitsu"] .home-hero,
body[data-page-design="washitsu"] main:not(.washitsu-page),
body.kt-washitsu .view-panel.active-view,
body.kt-washitsu .home-hero,
body.kt-washitsu main:not(.washitsu-page) {
    background:rgba(255,250,240,.72);
    border-color:rgba(91,70,44,.14);
}

body[data-page-design="washitsu"] .card,
body[data-page-design="washitsu"] .home-tool-card,
body[data-page-design="washitsu"] .tool-card,
body[data-page-design="washitsu"] .tutorial-card,
body[data-page-design="washitsu"] .stage-card,
body[data-page-design="washitsu"] .player-stage,
body[data-page-design="washitsu"] .kotowaza-card,
body[data-page-design="washitsu"] .kana-section,
body[data-page-design="washitsu"] .cta,
body.kt-washitsu .card,
body.kt-washitsu .home-tool-card,
body.kt-washitsu .tool-card,
body.kt-washitsu .tutorial-card,
body.kt-washitsu .stage-card,
body.kt-washitsu .player-stage,
body.kt-washitsu .kotowaza-card,
body.kt-washitsu .kana-section,
body.kt-washitsu .cta {
    border-color:rgba(91,70,44,.2) !important;
    background:rgba(255,250,240,.9) !important;
    box-shadow:0 13px 34px var(--kt-washitsu-shadow);
}

body[data-page-design="washitsu"] .home-pathway,
body[data-page-design="washitsu"] .badge-tool,
body[data-page-design="washitsu"] .tab-btn,
body[data-page-design="washitsu"] .tutorial-play,
body[data-page-design="washitsu"] .open-tool,
body.kt-washitsu .home-pathway,
body.kt-washitsu .badge-tool,
body.kt-washitsu .tab-btn,
body.kt-washitsu .tutorial-play,
body.kt-washitsu .open-tool {
    border-color:rgba(91,70,44,.2) !important;
    box-shadow:none;
}

body[data-page-design="washitsu"] #view-home,
body[data-page-design="washitsu"] #view-kanji-wave,
body[data-page-design="washitsu"] #view-kanji-animator,
body[data-page-design="washitsu"] #view-kanji-drama,
body[data-page-design="washitsu"] #view-kanji-improv,
body[data-page-design="washitsu"] #view-kanji-props,
body.kt-washitsu #view-home,
body.kt-washitsu #view-kanji-wave,
body.kt-washitsu #view-kanji-animator,
body.kt-washitsu #view-kanji-drama,
body.kt-washitsu #view-kanji-improv,
body.kt-washitsu #view-kanji-props {
    background:rgba(255,250,240,.64) !important;
}

body[data-page-design="washitsu"] #view-gallery,
body[data-page-design="washitsu"] #view-gifts,
body.kt-washitsu #view-gallery,
body.kt-washitsu #view-gifts {
    background:rgba(255,250,240,.72) !important;
    border:1px solid rgba(91,70,44,.14);
    box-shadow:none !important;
}

body[data-page-design="washitsu"] .dashboard,
body[data-page-design="washitsu"] .sidebar,
body[data-page-design="washitsu"] .reading-box,
body[data-page-design="washitsu"] .level-tabs,
body[data-page-design="washitsu"] .anim-canvas-wrapper,
body[data-page-design="washitsu"] .drama-stage-box,
body[data-page-design="washitsu"] .drama-media-controls,
body[data-page-design="washitsu"] .drama-search-container,
body[data-page-design="washitsu"] .improv-prompt-card,
body[data-page-design="washitsu"] .props-master,
body[data-page-design="washitsu"] .wave-motion-pane,
body[data-page-design="washitsu"] .wave-motion-info,
body[data-page-design="washitsu"] .gift-panel,
body[data-page-design="washitsu"] .gift-card,
body.kt-washitsu .dashboard,
body.kt-washitsu .sidebar,
body.kt-washitsu .reading-box,
body.kt-washitsu .level-tabs,
body.kt-washitsu .anim-canvas-wrapper,
body.kt-washitsu .drama-stage-box,
body.kt-washitsu .drama-media-controls,
body.kt-washitsu .drama-search-container,
body.kt-washitsu .improv-prompt-card,
body.kt-washitsu .props-master,
body.kt-washitsu .wave-motion-pane,
body.kt-washitsu .wave-motion-info,
body.kt-washitsu .gift-panel,
body.kt-washitsu .gift-card {
    background:rgba(255,250,240,.9) !important;
    border-color:rgba(91,70,44,.2) !important;
    box-shadow:0 13px 34px var(--kt-washitsu-shadow) !important;
}

body[data-page-design="washitsu"] .drama-stage-box,
body[data-page-design="washitsu"] .anim-canvas-wrapper,
body[data-page-design="washitsu"] .wave-motion-pane,
body.kt-washitsu .drama-stage-box,
body.kt-washitsu .anim-canvas-wrapper,
body.kt-washitsu .wave-motion-pane {
    border-width:1px !important;
}

body[data-page-design="washitsu"] #canvas-stage,
body[data-page-design="washitsu"] .drama-shared-stage,
body[data-page-design="washitsu"] #improvStage,
body[data-page-design="washitsu"] #kd-stage,
body[data-page-design="washitsu"] #nd-stage,
body.kt-washitsu #canvas-stage,
body.kt-washitsu .drama-shared-stage,
body.kt-washitsu #improvStage,
body.kt-washitsu #kd-stage,
body.kt-washitsu #nd-stage {
    background:
        linear-gradient(180deg,rgba(255,253,247,.94),rgba(250,244,232,.9)),
        repeating-linear-gradient(90deg,rgba(123,78,47,.08) 0 2px,transparent 2px 72px) !important;
    border-color:rgba(91,70,44,.18) !important;
}

body[data-page-design="washitsu"] input,
body[data-page-design="washitsu"] select,
body[data-page-design="washitsu"] textarea,
body.kt-washitsu input,
body.kt-washitsu select,
body.kt-washitsu textarea {
    background:#fffdf7;
    border-color:rgba(91,70,44,.24);
}

body[data-page-design="washitsu"] .btn-shatter-action,
body[data-page-design="washitsu"] .btn-reset-stage,
body[data-page-design="washitsu"] .btn-quick,
body[data-page-design="washitsu"] .improv-make-btn,
body[data-page-design="washitsu"] .wave-replay-btn,
body[data-page-design="washitsu"] .gift-add,
body.kt-washitsu .btn-shatter-action,
body.kt-washitsu .btn-reset-stage,
body.kt-washitsu .btn-quick,
body.kt-washitsu .improv-make-btn,
body.kt-washitsu .wave-replay-btn,
body.kt-washitsu .gift-add {
    background:#283b35 !important;
    color:#fff8e9 !important;
    border-color:#283b35 !important;
    box-shadow:none !important;
}

body[data-page-design="washitsu"] .btn-shatter-action:hover,
body[data-page-design="washitsu"] .btn-reset-stage:hover,
body[data-page-design="washitsu"] .btn-quick:hover,
body[data-page-design="washitsu"] .improv-make-btn:hover,
body[data-page-design="washitsu"] .wave-replay-btn:hover,
body.kt-washitsu .btn-shatter-action:hover,
body.kt-washitsu .btn-reset-stage:hover,
body.kt-washitsu .btn-quick:hover,
body.kt-washitsu .improv-make-btn:hover,
body.kt-washitsu .wave-replay-btn:hover {
    background:#7d3040 !important;
    border-color:#7d3040 !important;
}

body[data-page-design="washitsu"] #view-kanji-improv .dashboard,
body[data-page-design="washitsu"] #view-kanji-drama .dashboard,
body[data-page-design="washitsu"] #view-kanji-animator .dashboard,
body[data-page-design="washitsu"] #view-kanji-props .dashboard,
body.kt-washitsu #view-kanji-improv .dashboard,
body.kt-washitsu #view-kanji-drama .dashboard,
body.kt-washitsu #view-kanji-animator .dashboard,
body.kt-washitsu #view-kanji-props .dashboard {
    margin-left:auto;
    margin-right:auto;
}

@media (max-width:650px) {
    body[data-page-design="washitsu"]::before,
    body.kt-washitsu::before {
        top:62px;
        background-size:auto;
    }

    body[data-page-design="washitsu"] main:not(.washitsu-page),
    body.kt-washitsu main:not(.washitsu-page) {
        background:rgba(255,250,240,.78);
    }

    body[data-page-design="washitsu"] #view-kanji-improv .dashboard,
    body[data-page-design="washitsu"] #view-kanji-drama .dashboard,
    body[data-page-design="washitsu"] #view-kanji-animator .dashboard,
    body[data-page-design="washitsu"] #view-kanji-props .dashboard,
    body.kt-washitsu #view-kanji-improv .dashboard,
    body.kt-washitsu #view-kanji-drama .dashboard,
    body.kt-washitsu #view-kanji-animator .dashboard,
    body.kt-washitsu #view-kanji-props .dashboard {
        max-width:100%;
    }
}