:root { color-scheme: light; --paper:#f6f2e9; --ink:#2b3f34; --muted:#777b6d; --jade:#3f614c; --line:#dcded0; --portrait:#f3ebe0; font-family:"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif; color:var(--ink); background:var(--paper); line-height:1.65; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:radial-gradient(ellipse at 88% 15%,#e8eddf80,transparent 39%),var(--paper); }
button,textarea { font:inherit; }
button,a,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:7px; padding:9px 17px; min-height:44px; transition:background .2s,border-color .2s,transform .2s; }
button:hover:not(:disabled) { border-color:var(--jade); background:#e7eadd; }
button:disabled { opacity:.5; cursor:default; }
:focus-visible { outline:3px solid #a77636; outline-offset:5px; }
a { color:var(--jade); text-underline-offset:4px; }
.page-shell { width:min(1080px,100% - 88px); margin:auto; }
.masthead { height:100px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:13px; color:var(--ink); text-decoration:none; font-family:"AppleMyungjo","Iowan Old Style",serif; font-size:25px; line-height:1.25; letter-spacing:.13em; }
.brand-seal { width:42px; height:45px; display:grid; place-items:center; border:1px solid #637a60; border-radius:15px 3px 15px 3px; font-size:29px; letter-spacing:0; }
.brand small { display:block; margin-top:5px; font-family:system-ui,sans-serif; font-size:8px; font-weight:500; letter-spacing:.22em; }
.masthead-note { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.quiet-dot { width:5px; height:5px; border-radius:50%; background:#7a956d; }
.introduction { padding:49px 0 36px; position:relative; }
.eyebrow { font-size:11px; letter-spacing:.12em; color:var(--jade); font-weight:600; margin:0 0 15px; }
h1 { font-family:"AppleMyungjo","Iowan Old Style","Noto Serif KR",serif; font-weight:400; font-size:clamp(28px,3.2vw,40px); letter-spacing:-.045em; line-height:1.55; margin:0; }
h1 em { font-style:normal; color:#75846b; }
.introduction > p:last-of-type { color:var(--muted); font-size:13px; margin:16px 0 0; }
.garden-mark { position:absolute; right:40px; top:22px; font-family:serif; font-size:140px; font-weight:400; color:#d8dfcf; transform:rotate(-6deg); opacity:.42; user-select:none; }
.mobile-break { display:none; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px; }
h2 { font-size:14px; font-weight:600; margin:0; letter-spacing:-.025em; }
.section-number { color:#8a977c; font-family:Georgia,serif; font-weight:400; margin-right:12px; font-size:13px; }
.section-heading > p { margin:0; font-size:11px; color:var(--muted); }
#sages { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.sage-card { position:relative; text-align:center; border:1px solid transparent; border-radius:110px 110px 12px 12px; background:linear-gradient(180deg,#f3ebe08c,transparent); padding:0 12px 16px; transition:background .3s,border-color .3s; }
.sage-card[data-invited="true"] { border-color:#becdb4; background:#e8edde; }
.sage-portrait { margin:0 auto; width:min(100%,180px); aspect-ratio:3/4; background-image:url('/sages.png'); background-size:400% 100%; background-repeat:no-repeat; border-radius:90px 90px 5px 5px; mix-blend-mode:multiply; transform-origin:50% 85%; }
.sage-card h3 { margin:2px 0 1px; font-family:"AppleMyungjo","Iowan Old Style",serif; font-size:20px; font-weight:400; letter-spacing:.12em; }
.sage-perspective { font-size:11px; color:var(--muted); margin:0 0 11px; }
.sage-scripture { font-size:11px; color:var(--jade); margin:0 0 11px; }
.invite-button { min-height:34px; padding:4px 14px; font-size:11px; border-color:#c4cbbb; border-radius:30px; }
.invite-button[aria-pressed="true"] { background:var(--jade); color:#fff; border-color:var(--jade); }
.sage-state { font-size:10px; color:#75846b; display:block; position:absolute; right:8px; top:12px; padding:2px 7px; border-radius:20px; background:#f6f2e9cc; }
.sage-card[data-state="speaking"] { border-color:#8ba17c; background:#e8edde; }
.sage-portrait, .turn-avatar { position:relative; overflow:hidden; }
.portrait-canvas { width:100%; height:100%; display:block; border-radius:inherit; }
[data-motion-ready="true"] { background-image:none; }
.sage-portrait:not([data-motion-ready]) { animation:breathe 5.5s ease-in-out infinite; }
.sage-card:nth-child(2) .sage-portrait { animation-delay:-1.7s; }
.sage-card:nth-child(3) .sage-portrait { animation-delay:-3.4s; }
.sage-card:nth-child(4) .sage-portrait { animation-delay:-4.5s; }
.turn[data-state="speaking"] .turn-avatar { animation:portrait-emphasis 3.6s ease-in-out infinite; }
.sage-card[data-state="speaking"] .sage-state { background:var(--jade); color:#fff; }
.motion-toggle { font-size:11px; min-height:32px; padding:3px 11px; border-radius:20px; color:var(--jade); }
.motion-toggle::before { content:'Ⅱ'; font-size:10px; margin-right:6px; }
.motion-toggle[aria-pressed="false"]::before { content:'▷'; }
.invitation-hint { font-size:11px; color:var(--muted); margin:-8px 0 18px; }
.sage-card[data-state="entering"] { animation:arrive .7s ease-out both; }
.interpretation { margin:16px 0 27px; font-size:10px; text-align:center; color:#868778; }
.writing-space { max-width:820px; margin:0 auto; border-top:1px solid var(--line); padding-top:24px; }
.writing-space .section-heading { margin-bottom:10px; }
.text-button { border:0; padding:3px 0; min-height:30px; color:var(--muted); font-size:11px; text-decoration:underline; text-underline-offset:4px; }
.text-button:hover:not(:disabled) { background:transparent; color:var(--ink); }
.composer { background:#fffdf7b3; border:1px solid #d6dacb; border-radius:10px; padding:17px 20px 14px; box-shadow:0 4px 20px #34493103; }
.composer:focus-within { border-color:#839577; }
textarea { display:block; width:100%; max-width:100%; padding:0; resize:vertical; border:0; background:transparent; color:var(--ink); line-height:1.8; font-size:13px; min-height:72px; }
textarea:focus { outline:none; }
textarea::placeholder { color:#a0a291; }
.composer-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:8px; }
.composer-bottom > span { font-size:10px; color:#919684; }
.primary-button { background:var(--jade); color:#fff; border-color:var(--jade); font-size:12px; min-height:39px; border-radius:6px; padding:8px 20px; white-space:nowrap; }
.primary-button > span { margin-left:22px; font-size:17px; }
.primary-button:hover:not(:disabled) { color:white; background:#294b37; }
.privacy-note { color:#8c9081; font-size:10px; text-align:center; margin:12px 0 0; }
.request-feedback { max-width:820px; margin:12px auto; display:flex; align-items:center; gap:20px; }
#status { font-size:12px; color:var(--jade); margin:0; }
.error-box { max-width:820px; margin:18px auto; background:#f0e7d9; border-radius:8px; padding:16px; font-size:13px; }
.error-box p { margin:0 0 10px; }
.error-box button { background:var(--paper); }
.conversation { max-width:820px; margin:28px auto 0; overflow-wrap:anywhere; }
.conversation:empty { display:none; }
.round { border-top:1px solid var(--line); padding-top:25px; margin:0 0 34px; }
.round-question { font-family:"AppleMyungjo",serif; font-size:21px; font-weight:400; margin:0 0 22px; line-height:1.7; white-space:pre-wrap; }
.participation { padding:0 0 15px; color:var(--muted); font-size:12px; }
.participation p { margin:5px 0; }
.participation strong { color:var(--jade); margin-right:10px; font-weight:500; }
.turn { position:relative; display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; padding:22px 0; border-top:1px solid #e2e2d6; animation:arrive .45s ease-out both; }
.turn-avatar { width:46px; height:55px; border-radius:26px 26px 7px 7px; background-image:url('/sages.png'); background-size:400% 100%; mix-blend-mode:multiply; }
.turn h3 { margin:0; font-size:13px; font-weight:600; }
.turn-meta { display:flex; align-items:center; gap:10px; }
.turn-meta small { font-size:10px; color:#909780; }
.turn-meta .turn-state { color:var(--jade); }
.turn-body > p { margin:9px 0 0; font-size:14px; line-height:1.95; white-space:pre-wrap; }
blockquote { margin:17px 0 0; padding:13px 18px; border-left:2px solid #a6b592; background:#e9edde70; font-family:"AppleMyungjo",serif; font-size:14px; line-height:1.9; white-space:pre-wrap; }
blockquote a { display:block; margin-top:6px; font-family:system-ui,sans-serif; font-size:10px; }
.citation-label { display:block; margin-top:6px; font-family:system-ui,sans-serif; font-size:10px; color:var(--muted); }
.support-message { background:#e8eddf; padding:20px; border-radius:9px; white-space:pre-wrap; }
.takeaway { max-width:820px; margin:0 auto 24px; background:#e6eddd; border:1px solid #d2ddc4; border-radius:9px; padding:23px 26px; }
.takeaway .eyebrow { font-size:10px; }
#action { font-family:"AppleMyungjo",serif; font-size:19px; margin:0; line-height:1.8; }
.followup-composer { max-width:820px; margin:0 auto 25px; }
.followup-composer label { display:block; font-size:12px; font-weight:600; margin-bottom:12px; }
footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:40px; padding:21px 0 27px; border-top:1px solid var(--line); color:#929783; font-size:10px; }
.footer-divider { margin:0 12px; opacity:.5; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes breathe { 0%,100% { transform:translateY(0) rotate(-.3deg); } 50% { transform:translateY(-4px) rotate(.3deg); } }
@keyframes portrait-emphasis { 0%,100% { transform:scale(1); } 50% { transform:scale(1.04); } }
@keyframes arrive { from { opacity:.3; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(min-width:1400px) { .page-shell { width:1080px; } }
@media(max-width:700px) { .page-shell { width:calc(100% - 36px); } .masthead { height:78px; } .masthead-note { font-size:9px; } .brand { font-size:21px; gap:9px; } .brand-seal { width:34px; height:39px; font-size:25px; } .brand small { font-size:6px; } .introduction { padding:32px 0; } h1 { font-size:26px; line-height:1.65; } .introduction > p:last-of-type { font-size:12px; } .mobile-break { display:block; } .garden-mark { right:0; top:32px; font-size:105px; opacity:.27; } .section-heading { flex-wrap:wrap; gap:5px; margin-bottom:14px; } .section-heading > p { padding-left:29px; font-size:10px; } #sages { grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 11px; } .sage-card { padding:0 6px 12px; } .sage-portrait { max-width:118px; } .sage-card h3 { font-size:19px; } .sage-perspective { font-size:10px; } .sage-state { top:8px; right:2px; font-size:9px; padding:1px 5px; } .interpretation { font-size:9px; margin:16px 0 24px; } .writing-space { padding-top:18px; } .composer { padding:14px; } textarea { font-size:16px; min-height:90px; } .primary-button { padding:8px 14px; font-size:12px; } .primary-button > span { margin-left:12px; } .privacy-note { line-height:1.8; font-size:9px; max-width:280px; margin:12px auto 0; } .turn { grid-template-columns:35px minmax(0,1fr); gap:11px; padding:20px 0; } .turn-avatar { width:34px; height:43px; } .turn-body > p { font-size:14px; } .turn-meta { flex-wrap:wrap; gap:3px 9px; } .round-question { font-size:19px; } .takeaway { padding:20px; } #action { font-size:18px; } footer { align-items:flex-start; font-size:9px; gap:10px; } footer > span:last-child { max-width:90px; text-align:right; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation:none !important; transition:none !important; }