html,body,#root{margin:0;min-height:100%}body{background:var(--ds-page)}.file-nav{display:flex;flex-wrap:wrap;gap:20px;border-bottom:1px solid var(--ds-hairline)}.file-nav a{padding:10px 0;color:var(--ds-ink-2);text-decoration:none}.file-nav a[aria-current=page]{color:var(--ds-ink);box-shadow:inset 0 -1px 0 var(--ds-ink)}@media(max-width:600px){.file-nav a{display:inline-flex;align-items:center;min-height:44px}}.tag{display:inline-block;align-self:flex-start;width:fit-content;font-size:12px;padding:2px 8px;border-radius:999px;margin-bottom:8px}.tag-live{background:#e3f1ee;color:#0b5d52}.tag-demo{background:#f1ece3;color:#6a5a3a}.check{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--ds-hairline);min-height:44px}.check input{width:22px;height:22px;flex:none;margin-top:2px}.check.on span{color:var(--ds-ink-2);text-decoration:line-through}.btns{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.form{display:grid;gap:12px;margin-top:12px}.form label{display:grid;gap:4px;font-weight:600}.form input,.form textarea{font:inherit;font-weight:400;padding:10px;border:1px solid var(--ds-hairline);border-radius:8px;min-height:44px;box-sizing:border-box;width:100%}.thread{display:grid;gap:8px;margin:12px 0}.thread p{margin:0;padding:10px 12px;border-radius:12px}.thread .me{background:#e3f1ee}.thread .them{background:#f1ece3}.chip{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}.chip-pending{background:#fdf3d7;color:#8a6d1a}.chip-active{background:#e0e9fb;color:#27468f}.chip-done{background:#e3f1ee;color:#0b5d52}.orderrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--ds-hairline);cursor:pointer;min-height:44px}.orderrow:last-of-type{border-bottom:none}.orderrow .sub{color:var(--ds-ink-2);font-size:13px}.timeline{display:grid;gap:2px;margin:12px 0}.timeline .step{display:flex;gap:10px;align-items:center;padding:6px 0;color:var(--ds-ink-2)}.timeline .step .dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--ds-hairline);flex:none}.timeline .step.done{color:var(--ds-ink)}.timeline .step.done .dot{background:currentColor;border-color:currentColor}.timeline .step.current{font-weight:700}
:root{--ds-page:#fff;--ds-hairline:#eae9ea;--ds-ink:#251f21;--ds-ink-2:#585254}*{box-sizing:border-box}body{font:16px/1.6 Arial,sans-serif;color:#251f21;margin:0;background:#f4efec}main{max-width:1040px;margin:auto;background:white;padding:24px;min-height:100vh}h1{font:36px/1.15 Georgia,serif;letter-spacing:-.025em}h2{font:24px/1.25 Georgia,serif}.eyebrow{font-weight:700;color:var(--accent)}header{padding:20px 0}section{padding:24px 0}.caption,figcaption,footer{font-size:14px;color:#585254}footer{padding:25px 0;border-top:1px solid #ddd}.sample-banner{background:#f4efec;padding:12px;font-size:13px;font-weight:700}aside{padding:16px;background:#f4efec;border-radius:8px;margin:16px 0}button{font:inherit;cursor:pointer;min-height:44px;padding:10px 16px;border:1px solid var(--accent);background:var(--accent);color:white;border-radius:5px}button.ghost,button.secondary{color:var(--accent);background:white}.row{display:flex;gap:24px;justify-content:space-between;align-items:flex-start;padding:14px 0;border-bottom:1px solid #eae9ea}.row>span{max-width:50%;text-align:right}.row p{margin:3px 0}.file-nav{position:sticky;top:0;background:white;z-index:1;gap:16px!important}.file-nav a[aria-current=page]{font-weight:700;color:var(--accent)!important}.file-nav a{min-height:44px}figure{margin:20px 0}figure img{width:100%;max-height:240px;object-fit:cover;border-radius:8px}input,textarea{font:inherit}p,span,strong{overflow-wrap:anywhere}input[type=checkbox]{accent-color:var(--accent)}@media(max-width:480px){main{padding:20px}h1{font-size:30px}.row{display:block}.row>span{display:block;max-width:100%;text-align:left;margin-top:6px}.file-nav{gap:14px!important}button{max-width:100%}}
:root{--accent:#225a91}