@charset "UTF-8";
:root{--paper:#f6f3ec;--ink:#273d4b;--soft:#687d87;--line:#d7dfde;--blue:#496a82;--pale:#e7eef0;--coral:#c37760;--serif:"Noto Serif CJK SC","Songti SC","STSong",serif;--sans:"Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans);font-size:14px;line-height:1.7}button,input,textarea{font:inherit}button,a,input,textarea{outline-offset:5px}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--blue)}[hidden]{display:none!important}.desk{max-width:1480px;margin:auto;padding:0 54px;background:radial-gradient(ellipse at 56% 46%,#e4edeb80,transparent 58%)}.masthead{height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:14px;align-items:center;font-family:Georgia,serif;font-size:23px;letter-spacing:-.4px}.brand small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:2.8px;color:var(--soft);margin-top:-3px}.brand-mark{display:grid;place-items:center;width:43px;height:43px;background:#d6e3e9;border:1px solid #c4d4dd;border-radius:17px 20px 16px 22px;font-family:monospace;font-weight:bold;font-size:19px;transform:rotate(-8deg)}.guide-link{font-size:12px;letter-spacing:1px;color:var(--soft)}.guide-link span{margin-left:10px}.workspace{display:grid;grid-template-columns:minmax(220px,1fr) minmax(280px,1.28fr) minmax(210px,.9fr);gap:50px;min-height:760px;padding:55px 0 38px;align-items:center}.eyebrow{font-family:Georgia,serif;font-size:10px;letter-spacing:2.4px;color:var(--soft);margin:0 0 14px}h1{font-family:var(--serif);font-size:46px;line-height:1.5;font-weight:500;letter-spacing:2px;margin:0 0 20px}.intro-copy{font-size:13px;line-height:2;color:var(--soft);margin-bottom:32px}.connection{border-top:1px solid var(--line);padding-top:19px}.connection h2{font-size:13px;font-weight:500;margin:0 0 19px}.section-number{color:#9aabae;font-family:Georgia,serif;font-size:12px;margin-right:15px}.connection label{font-size:11px;color:var(--soft)}.token-field{display:flex;margin-top:7px;border-bottom:1px solid #adbec6;padding-bottom:8px;gap:8px}#token{width:100%;min-width:0;border:0;background:transparent;font-size:12px;color:var(--ink);outline:none}.file-button{cursor:pointer;flex-shrink:0;font-size:10px!important;padding:1px 3px}.field-hint{font-size:10px;color:#8b999d;margin:8px 0 16px}.button{border:0;background:var(--blue);color:#fff;border-radius:7px;font-size:12px;padding:12px 16px;transition:background .15s,transform .15s}.button:hover:not(:disabled){background:#36576f;transform:translateY(-1px)}.primary{display:flex;justify-content:space-between;align-items:center;width:100%;letter-spacing:.5px}.secondary-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:10px}.text-button{padding:5px 0;border:0;background:transparent;color:var(--soft);font-size:11px}.stop{color:#a86753}.device-note{display:flex;gap:9px;color:var(--soft);font-size:10px;line-height:1.9;margin-top:20px}.device-note p{margin:0}.note-dot{height:5px;width:5px;border-radius:100%;background:#a7b9b7;flex-shrink:0;margin-top:7px}.little-note{font-family:var(--serif);font-size:12px;color:#809293;line-height:2.1;margin-top:30px;padding-left:18px;border-left:2px solid #dce3dd;transform:rotate(-2deg)}.screen-section{align-self:stretch;display:flex;flex-direction:column;align-items:center;min-width:0}.screen-heading{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:25px}.screen-label{font-family:Georgia,serif;font-size:10px;letter-spacing:2px;color:var(--soft)}.status-badge{display:flex;gap:7px;align-items:center;color:var(--soft);font-size:10px}.status-badge i{width:5px;height:5px;background:#a5b6bb;border-radius:100%}.status-badge[data-phase=live] i{background:#6e9a80;box-shadow:0 0 0 4px #6e9a8012}.status-badge[data-phase=error] i{background:var(--coral)}.screen-stage{position:relative;width:100%;flex:1;display:flex;align-items:center;justify-content:center;min-height:450px;padding:0 14px}.phone-shell{position:relative;aspect-ratio:9/20;width:min(100%,264px);border:1px solid #93a8b4;border-radius:30px;padding:9px;background:#dbe4e8;box-shadow:0 19px 35px -17px #3b5b6c50,0 2px 1px #fff inset,0 0 0 3px #eef0eb}.phone-shell:before{content:"";position:absolute;left:-4px;top:104px;width:2px;height:42px;background:#8ca2af;border-radius:3px}.phone-display{width:100%;height:100%;position:relative;border:1px solid #c3cfd2;border-radius:22px;overflow:hidden;background:#f2f4ee}.phone-display canvas,.phone-display>img{display:block;width:100%;height:100%;object-fit:contain;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.empty-screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;background:radial-gradient(circle at 60% 34%,#e1e9e080,transparent 70%)}.cloud-face{font:34px/1.5 monospace;color:#6d8da4;background:#d3e1e9;border-radius:43% 52% 45% 38%;width:99px;height:83px;display:grid;place-items:center;transform:rotate(-7deg);box-shadow:14px -8px 0 -11px #d3e1e9,-13px 7px 0 -9px #d3e1e9;margin-bottom:22px}.empty-screen p{font-family:var(--serif);font-size:14px;letter-spacing:1px;margin:0 0 12px}.empty-screen>span{font-size:10px;color:#85989d;line-height:2}.paper-label{position:absolute;right:-16px;bottom:33px;z-index:1;pointer-events:none;background:#f5e8cc;color:#96805b;font:italic 13px/1.35 Georgia,serif;padding:10px 15px;transform:rotate(-8deg);box-shadow:0 3px 4px #3434260a;border:1px solid #eadcc1}.phone-nav{display:flex;justify-content:center;gap:34px;margin-top:24px}.phone-nav button{border:0;background:none;font-size:10px;color:var(--soft);display:flex;flex-direction:column;align-items:center;padding:0 10px}.phone-nav span{font-family:monospace;font-size:24px;line-height:1.4;color:var(--blue)}.status-message{text-align:center;font-size:10px;color:var(--soft);max-width:360px;line-height:1.9;margin:15px 0 0;min-height:38px}.writing-pad{padding:26px 23px 20px;background:#fffdf7;border:1px solid #e2dfd3;border-radius:3px;box-shadow:0 5px 18px #34494305;transform:rotate(1deg);position:relative}.writing-pad:before{content:"";position:absolute;top:-8px;left:calc(50% - 29px);width:58px;height:17px;background:#dce8ecaf;transform:rotate(-3deg)}.writing-pad .eyebrow{font-size:8px;letter-spacing:1.8px;margin-bottom:10px}.writing-pad h2{font-family:var(--serif);font-size:21px;font-weight:500;letter-spacing:1px;margin:0}.writing-pad p{font-size:11px;color:var(--soft);line-height:2;margin:10px 0 17px}textarea{resize:vertical;min-height:137px;width:100%;border:0;background:repeating-linear-gradient(transparent,transparent 28px,#e5e9e4 28px,#e5e9e4 29px);line-height:29px;font-size:12px;padding:0 1px;color:var(--ink);outline:none;border-radius:0}textarea:disabled{opacity:.65}textarea::placeholder{color:#a1abaa}.text-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px}.text-bottom>span{font-size:8px;color:#95a1a2}.small{padding:8px 11px;font-size:10px}.writing-pad>small{display:block;font-size:9px;color:#9aa5a4;margin-top:12px}.how-to{padding:25px 6px 0}.how-to h2{font-size:11px;letter-spacing:1px;font-weight:500;margin:0 0 15px}.how-to ol{list-style:none;margin:0;padding:0;counter-reset:tips}.how-to li{font-size:10px;color:var(--soft);padding:7px 0;display:grid;grid-template-columns:15px 75px 1fr;line-height:1.7}.how-to li:before{counter-increment:tips;content:counter(tips);font:italic 12px Georgia,serif;color:#adb7b6;padding-top:3px}.how-to li span{color:#536e7b}.how-to>p{font-size:10px;color:#8c9b9c;margin-top:22px;line-height:2;border-top:1px solid var(--line);padding-top:13px}footer{display:flex;justify-content:space-between;gap:15px;padding:20px 0 23px;border-top:1px solid var(--line);font-size:10px;color:#899a9e}footer a{font-size:10px}.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}
@media(min-width:1500px){.workspace{min-height:calc(100vh - 180px)}}
@media(max-width:1100px){.desk{padding:0 32px}.workspace{grid-template-columns:minmax(190px,1fr) minmax(270px,1.35fr);gap:36px}.right-rail{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:750px;width:100%;margin:auto}.writing-pad{transform:none}.how-to{padding:10px 0}.masthead{height:95px}.workspace{padding-top:38px}.paper-label{right:5px}h1{font-size:39px}}
@media(max-width:650px){.desk{padding:0 22px}.masthead{height:82px}.brand{font-size:19px}.brand-mark{width:36px;height:36px;font-size:16px}.brand small{font-size:8px}.guide-link{font-size:10px}.workspace{display:flex;flex-direction:column;gap:30px;padding:28px 0}.introduction{width:100%}h1{font-size:32px;line-height:1.4;margin:0 0 10px}h1 br{display:none}.eyebrow{font-size:8px;margin-bottom:10px}.intro-copy{font-size:11px;margin:10px 0 20px}.intro-copy br{display:none}.connection{padding-top:15px}.connection h2{margin-bottom:12px}.little-note{display:none}.device-note{margin-top:12px;font-size:9px}.screen-section{width:100%}.screen-heading{max-width:340px;margin:0 auto 20px}.screen-stage{min-height:unset;padding:0 30px}.phone-shell{width:245px}.phone-nav{margin-top:18px}.paper-label{right:5px;bottom:24px}.right-rail{display:block;max-width:360px}.writing-pad{padding:24px}.how-to{padding:26px 4px 0}footer{flex-direction:column;gap:5px;align-items:center;font-size:9px}.status-message{margin-top:10px}}
@media(prefers-reduced-motion:no-preference){.workspace{animation:arrive .55s ease-out both}@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}