:root{--paper:#fcfcfa;--soft:#f1f3ef;--ink:#202523;--muted:#626c67;--line:#d8ded8;--blue:#176494;--focus:#176494;color-scheme:light}
html[data-theme=blue]{--paper:#176494;--soft:#205b80;--ink:#fcfcfa;--muted:#dcebf3;--line:#6292ae;--blue:#d0eafa;--focus:#fff;color-scheme:dark}
#theme{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;border:1px solid var(--line);border-radius:10px;color:var(--ink)}
.personalise{margin:24px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.personalise>summary{padding:14px 0;color:var(--ink);font-size:15px}.personalise-fields{padding:8px 0 20px}.personalise select{width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);font:inherit;margin:0 0 20px}.personalise label{display:flex;justify-content:space-between;gap:12px}.personalise output{color:var(--muted);font-size:13px}.personalise input[type=range]{padding:0;border:0;min-height:32px;accent-color:var(--blue);cursor:pointer}.range-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin:0 0 22px}.reset-avatar{background:none;color:var(--blue);border:0;padding:8px 0;min-height:44px;text-decoration:underline;text-underline-offset:4px;font-size:14px}
html[data-theme=dark]{--paper:#111514;--soft:#1c2520;--ink:#f1f3ef;--muted:#acb7b0;--line:#38443c;--blue:#99cde8;--focus:#99cde8;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;font-size:16px;line-height:1.6}button,input{font:inherit}button{cursor:pointer}button,a,input,summary{outline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--focus)}a{color:inherit}.nav{min-height:76px;display:flex;justify-content:space-between;align-items:center;padding:16px 34px;border-bottom:1px solid var(--line);gap:20px}.brand{text-decoration:none;font-size:25px;letter-spacing:-.05em}.brand span{color:var(--blue)}.nav-actions{display:flex;gap:22px;align-items:center}.beta{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:30px;padding:4px 12px}.nav button,.art-top button{background:none;border:0;color:var(--muted);padding:8px 0;min-height:44px;font-size:14px}main{max-width:1080px;margin:auto;padding:48px 30px 0}.intro{margin-bottom:34px}.eyebrow{font-size:14px;color:var(--blue);margin:0 0 10px}h1{font-size:clamp(34px,4vw,48px);font-weight:500;letter-spacing:-.045em;line-height:1.18;margin:0 0 16px}.intro>p:last-child{font-size:18px;color:var(--muted);line-height:1.65;margin:0}.workspace{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:48px;align-items:start}.art-panel{border:1px solid var(--line);border-radius:10px;overflow:hidden}.art-top{display:flex;justify-content:space-between;align-items:center;padding:8px 22px;gap:10px;font-size:13px;color:var(--muted)}#portrait{display:block;width:100%;height:auto;aspect-ratio:1}.art-bottom{margin:0 24px;padding:18px 0 12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;overflow-wrap:anywhere}#signed-name{font-weight:600}#signed-url{color:var(--muted)}#status{font-size:12px;color:var(--muted);margin:0 24px 18px;min-height:20px}.controls{padding-top:8px}fieldset{border:0;padding:0;margin:0 0 25px}legend,label{font-size:14px;margin-bottom:9px;display:block}.kinds{display:flex;gap:8px}.kinds button{flex:1;min-height:46px;border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:14px;padding:9px}.kinds button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}input{display:block;width:100%;min-width:0;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);padding:12px;font-size:16px;min-height:48px}#name{margin-bottom:22px}.address{display:flex;border:1px solid var(--line);border-radius:6px;align-items:center}.address span{padding-left:12px;color:var(--muted);font-size:14px;white-space:nowrap}.address input{border:0;padding-left:3px}.hint{font-size:13px;color:var(--muted);line-height:1.55;margin:10px 0 0}.small-preview{display:flex;align-items:center;gap:16px;margin:28px 0;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.small-preview>div{width:64px;height:64px;flex-shrink:0;border-radius:50%;overflow:hidden;background:var(--soft)}#avatar{width:64px;height:64px;display:block}.small-preview p{margin:0;min-width:0}.small-preview strong{display:block;font-size:15px;font-weight:500;overflow-wrap:anywhere}.small-preview span{display:block;font-size:13px;color:var(--muted);margin-top:2px}.primary{width:100%;border:0;border-radius:6px;background:var(--ink);color:var(--paper);padding:14px 20px;min-height:50px;font-weight:500}.primary:disabled{opacity:.45;cursor:wait}.privacy{font-size:13px;color:var(--muted);margin:24px 0}.divider{display:flex;align-items:center;gap:12px;margin:52px 0 40px}.divider:before,.divider:after{content:"";height:1px;background:var(--line);flex:1}.divider span{width:5px;height:5px;border-radius:50%;background:var(--blue)}.explain{display:grid;grid-template-columns:1fr 1fr;gap:48px}h2{font-size:20px;letter-spacing:-.025em;font-weight:500;margin:0 0 12px}.explain p,details p{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 16px}details{margin:22px 0 40px;max-width:700px}summary{font-size:14px;color:var(--muted);cursor:pointer;min-height:44px;padding:10px 0}code{overflow-wrap:anywhere;font-size:12px}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;padding:24px 0;font-size:12px;color:var(--muted)}
@media(max-width:720px){.nav{padding:12px 20px}.nav-actions{gap:14px}.beta{display:none}main{padding:30px 20px 0}.workspace{grid-template-columns:1fr;gap:24px}.controls{display:grid;grid-template-columns:1fr;}.small-preview{margin:20px 0}.intro{margin-bottom:26px}.explain{grid-template-columns:1fr;gap:18px}.divider{margin:36px 0}.art-top{padding:8px 16px}.art-bottom{margin:0 16px}footer{flex-direction:column;gap:6px}}

.brand{display:inline-flex;align-items:center;white-space:nowrap}.brand::before{content:"";width:32px;height:32px;margin-right:8px;flex:0 0 32px;background:#fcfcfa url("/assets/getknown-avatar-v1.svg") center/contain no-repeat;border-radius:50%}
