/* Product tokens: warm white, quiet mint, and the original clay brand assets. */
:root{color-scheme:light;--paper:#f8f6ef;--ink:#273f36;--green:#286b5c;--muted:#65796c;font-family:"PingFang SC","Noto Sans SC",sans-serif;background:var(--paper);color:var(--ink)}
*{box-sizing:border-box}body{margin:0}button,a,input{font:inherit}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #448a77;outline-offset:4px}button{border:0}p,h1,h2{margin:0}button,a{-webkit-tap-highlight-color:transparent}button:disabled{cursor:wait;opacity:.6}
.demo-header{height:86px;max-width:1440px;padding:0 5%;margin:auto;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dce2d6;gap:20px}.brand{min-height:44px;display:flex;align-items:center;gap:22px}.brand img{display:block;width:128px;height:auto}.brand>span{font-size:12px;color:var(--muted);padding-left:22px;border-left:1px solid #cdd7c8;letter-spacing:.08em}.demo-tools{display:flex;gap:20px;align-items:center}.role-switch{display:flex;gap:3px;padding:4px;border:1px solid #cbd8c8;border-radius:40px}.role-switch button{background:transparent;padding:0 22px;min-height:42px;border-radius:30px;font-size:13px}.role-switch button[aria-pressed=true]{background:var(--green);color:white}.reset{display:flex;gap:8px;align-items:center;justify-content:center;background:none;min-height:44px;font-size:12px;color:var(--muted)}
.demo-layout{max-width:1340px;margin:0 auto;padding:44px 5% 42px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;min-height:calc(100vh - 86px)}.demo-story{max-width:500px}.eyebrow{font-size:10px;letter-spacing:.16em;color:#608271;margin-bottom:23px}h1{font-family:"Kaiti SC","STKaiti","KaiTi",serif;font-size:clamp(40px,4vw,57px);font-weight:400;line-height:1.35;letter-spacing:-.045em}h1 span{color:var(--green)}.intro{font-size:15px;line-height:1.9;color:#617363;margin-top:20px}.guide{padding-top:27px;margin-top:30px;border-top:1px solid #d1dccd}.guide-label{font-size:11px;color:#658273;margin-bottom:11px}.guide h2{font-size:21px;line-height:1.5;font-weight:500}.guide>p:last-child{font-size:13px;line-height:1.9;color:var(--muted);margin-top:12px;max-width:31em}.demo-shortcuts{margin-top:23px;display:grid;grid-template-columns:1fr 1fr;gap:10px 25px}.demo-shortcuts button{min-height:44px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #d5dfd1;padding:10px 0;background:transparent;font-size:12px;text-align:left}.demo-shortcuts button>span{font-size:10px;color:#708a75}.demo-shortcuts button>b{margin-left:auto;font-size:16px;font-weight:400}.demo-shortcuts button:hover{color:#246c68}.demo-try{display:flex;gap:16px;margin-top:25px;align-items:center}.demo-try button{font-size:12px;min-height:44px}.demo-try button:first-child{background:var(--green);color:white;border-radius:5px;padding:12px 20px}.demo-try button:first-child span{margin-left:20px}.demo-try button:last-child{border-bottom:1px solid #a0b59b;background:transparent;padding:8px 0}.demo-pin{font-size:11px;color:#5e7967;margin-top:16px}.demo-pin b{letter-spacing:.14em;font-weight:500}.demo-disclosure{display:flex;align-items:start;gap:9px;margin-top:24px;color:#587765;font-size:11px;line-height:1.8}.status-dot{width:6px;height:6px;background:#548776;border-radius:50%;flex:none;margin-top:6px}.demo-disclosure small{display:block;font-size:10px;max-width:38em;color:#798778;margin-top:5px}.back-case{display:inline-block;font-size:11px;margin-top:13px;padding:10px 0;color:#5d7867;min-height:40px}.demo-stage{width:100%;max-width:472px;justify-self:center}.stage-caption{display:flex;justify-content:space-between;font-size:11px;color:#5e7a69;letter-spacing:.07em;margin:0 8px 14px}.stage-caption span:last-child{font-size:9px;letter-spacing:.18em}.device{position:relative;border:8px solid #fffef8;background:#eaf0e8;border-radius:35px;overflow:hidden;box-shadow:0 26px 70px #294b3215,0 0 0 1px #d5ded0;max-width:446px;margin:auto;height:min(844px,calc(100dvh - 164px));min-height:660px}.device iframe{border:0;width:100%;height:100%;display:block;background:#eaf0e8}.demo-loading{position:absolute;inset:0;background:#eaf0e8;display:grid;place-items:center;font-size:13px;color:#53745e;z-index:2}.demo-loading[hidden]{display:none}.stage-footnote{text-align:center;font-size:10px;line-height:1.8;color:#7b8b79;margin-top:15px}.mobile-hint{display:none}
dialog{border:1px solid #c9d6c5;border-radius:18px;padding:30px;max-width:440px;width:calc(100% - 32px);color:var(--ink);background:#fffdf6;box-shadow:0 20px 80px #18332725}dialog::backdrop{background:#183e3566;backdrop-filter:blur(5px)}dialog h2{font-size:24px;line-height:1.4;font-weight:500;margin:0 0 16px}dialog p:not(.eyebrow){font-size:14px;line-height:1.9;color:#5f7667;margin-bottom:16px}.dialog-actions{display:flex;gap:12px;margin-top:25px}.dialog-actions button{flex:1;background:#eaf0e6;min-height:46px;border-radius:6px;padding:10px 18px;font-size:13px}button.primary{background:var(--green);color:white;min-height:46px;border-radius:6px;padding:10px 20px;font-size:14px}#shell-toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);background:#284f42;color:white;border-radius:10px;padding:12px 18px;font-size:13px;z-index:20;opacity:0;pointer-events:none;max-width:90vw;transition:opacity .15s}#shell-toast.visible{opacity:1}
@media(max-width:1100px){.demo-layout{gap:35px;padding-inline:4%;padding-top:28px}.demo-header{padding-inline:4%}.device{min-height:630px}.demo-story h1{font-size:45px}.guide{margin-top:22px;padding-top:22px}.demo-try{gap:10px}.demo-try button:first-child{padding-inline:15px}.demo-story .intro{font-size:14px}}
@media(max-width:760px){body{height:100dvh;overflow:hidden}.demo-header{height:60px;padding:0 14px;background:#f8f6ef;border-bottom:1px solid #d2ddce;gap:6px}.brand{gap:0}.brand img{width:88px}.brand>span{display:none}.demo-tools{gap:8px}.role-switch{padding:2px;gap:0}.role-switch button{min-height:40px;padding:0 13px;font-size:12px}.reset{width:44px;min-width:44px;min-height:44px}.reset span{display:none}.demo-layout{display:block;padding:0;min-height:0;height:calc(100dvh - 104px)}.demo-story{display:none}.demo-stage{max-width:none;height:100%}.stage-caption,.stage-footnote{display:none}.device{height:100%;min-height:0;max-width:560px;width:100%;border:0;border-radius:0;box-shadow:none}.mobile-hint{display:flex;justify-content:center;align-items:center;gap:16px;height:44px;background:#f2f4e9;border-top:1px solid #dce4d7;font-size:10px;color:#52725e}.mobile-hint button{font-size:10px;background:transparent;text-decoration:underline;text-underline-offset:3px;padding:5px 8px;min-height:44px}.demo-loading{font-size:12px}#shell-toast{bottom:44px;width:max-content;max-width:90vw}}
@media(max-width:350px){.brand img{width:77px}.demo-header{padding-inline:10px}.demo-tools{gap:3px}.role-switch button{padding-inline:10px}.reset{width:44px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.demo-story h1 span{white-space:nowrap}
@media(min-width:761px) and (max-width:900px){.demo-story h1{font-size:36px}}