:root { color-scheme: light; --ink:#17201c; --muted:#66716b; --paper:#f3f7f2; --panel:#fff; --line:#dbe4dc; --lime:#c8ff59; --green:#1c6b49; --orange:#ff7048; --shadow:0 18px 55px rgba(32,64,44,.08); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:radial-gradient(circle at 80% 0,#e7ffd2 0,transparent 28%),var(--paper); } button,input,textarea { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; } a { color:inherit; } [v-cloak] { display:none; }
.topbar { position:sticky; top:0; z-index:10; min-height:68px; display:flex; align-items:center; gap:38px; padding:0 max(24px,5vw); border-bottom:1px solid rgba(219,228,220,.85); background:rgba(243,247,242,.88); backdrop-filter:blur(18px); }
.brand { padding:0; border:0; background:none; font-size:25px; font-weight:950; letter-spacing:-.07em; cursor:pointer; }.topbar nav { display:flex; gap:4px; }.topbar nav button { padding:9px 12px; border:0; border-radius:999px; color:var(--muted); background:none; cursor:pointer; }.topbar nav button.active,.topbar nav button:hover { color:var(--ink); background:#fff; }.top-actions { margin-left:auto; display:flex; align-items:center; gap:14px; }.status { margin-left:auto; color:var(--muted); font-size:13px; }
.mode-switch { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; cursor:pointer; }.mode-switch input { accent-color:var(--green); }.avatar { display:grid; place-items:center; width:38px; height:38px; padding:0; border:0; border-radius:50%; color:white; background:var(--ink); font-weight:800; cursor:pointer; }.avatar.small { width:34px; height:34px; flex:0 0 auto; }.avatar.large { width:88px; height:88px; font-size:30px; }
.notice { position:fixed; right:24px; bottom:24px; z-index:30; display:flex; gap:18px; align-items:center; max-width:420px; padding:15px 18px; border-radius:14px; color:white; background:var(--ink); box-shadow:var(--shadow); }.notice button { padding:0; border:0; color:white; background:none; font-size:20px; cursor:pointer; }
main,.public-shell { width:min(1180px,calc(100vw - 40px)); margin:34px auto 100px; }.stack { display:grid; gap:22px; }.panel { padding:clamp(24px,4.5vw,58px); border:1px solid var(--line); border-radius:28px; background:rgba(255,255,255,.94); box-shadow:var(--shadow); }.eyebrow { margin:0 0 12px; color:var(--green); font:800 12px/1.2 ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase; }h1,h2,h3,p { overflow-wrap:anywhere; }h1 { margin:0; max-width:880px; font-size:clamp(44px,7vw,86px); line-height:.96; letter-spacing:-.065em; }h2 { margin:0; font-size:clamp(28px,4vw,42px); letter-spacing:-.045em; }h3 { margin:0; font-size:19px; letter-spacing:-.02em; }.lede { max-width:670px; margin:22px 0; color:var(--muted); font-size:18px; line-height:1.6; }.muted,small { color:var(--muted); }.section-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:28px; }.section-head>span { color:var(--muted); font-size:13px; }
.primary,.secondary { display:inline-flex; align-items:center; justify-content:center; min-height:43px; padding:10px 17px; border-radius:999px; cursor:pointer; text-decoration:none; }.primary { border:1px solid var(--ink); color:white; background:var(--ink); }.primary:hover { background:var(--green); border-color:var(--green); }.primary:disabled,.secondary:disabled { opacity:.45; cursor:not-allowed; }.secondary { border:1px solid var(--line); color:var(--ink); background:white; }.block { width:100%; }.button-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }.text-button,.link-button { padding:0; border:0; color:var(--green); background:none; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.auth-shell { width:min(1180px,calc(100vw - 40px)); min-height:calc(100vh - 68px); margin:auto; display:grid; grid-template-columns:1.2fr .8fr; gap:7vw; align-items:center; }.auth-intro h1 { max-width:720px; }.auth-card { padding:clamp(28px,4vw,46px); border:1px solid var(--line); border-radius:26px; background:#fff; box-shadow:var(--shadow); }.auth-card h2 { margin-bottom:8px; }.auth-card form { margin-top:24px; }.auth-card label,.profile-form label,.topup label,.publish-shell>label { display:grid; gap:8px; font-size:13px; font-weight:750; }.form-row { display:flex; gap:8px; }.form-row input { flex:1; min-width:0; }.auth-card .block { margin-top:12px; }
input,textarea { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:#fbfdfb; outline:none; }input:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(28,107,73,.1); }textarea { min-height:112px; resize:vertical; }
.device-banner { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; padding-block:22px; }.device-banner p { margin:5px 0 0; }.hero { min-height:440px; display:grid; grid-template-columns:1.15fr .85fr; align-items:center; overflow:hidden; }.hero-orbit { position:relative; width:min(360px,40vw); aspect-ratio:1; margin:auto; border:1px dashed #aac0ae; border-radius:50%; animation:turn 40s linear infinite; }.hero-orbit strong,.hero-orbit span { position:absolute; display:grid; place-items:center; width:58px; height:58px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow); }.hero-orbit strong { inset:50% auto auto 50%; width:86px; height:86px; transform:translate(-50%,-50%); border-radius:28px; background:var(--lime); font-size:23px; letter-spacing:-.06em; }.hero-orbit span:nth-child(1){left:-20px;top:44%}.hero-orbit span:nth-child(2){right:6%;top:-12px}.hero-orbit span:nth-child(3){right:-18px;top:57%}.hero-orbit span:nth-child(4){left:15%;bottom:-17px}.hero-orbit span:nth-child(6){left:13%;top:3%}@keyframes turn{to{transform:rotate(360deg)}}
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:30px; }.step { display:flex; gap:12px; padding:16px; border:1px solid var(--line); border-radius:16px; opacity:.65; }.step>span { display:grid; place-items:center; flex:0 0 28px; height:28px; border-radius:50%; background:#edf2ed; font-weight:800; }.step h3 { margin-bottom:5px; font-size:15px; }.step p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }.step.done { opacity:1; border-color:#9dd7b6; background:#f3fff7; }.step.done>span { color:white; background:var(--green); }.step.done>span::after { content:'✓'; }.step.done>span { font-size:0; }.step.done>span::after { font-size:13px; }
.app-picker { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }.app-choice { min-height:130px; display:flex; flex-direction:column; align-items:flex-start; gap:7px; padding:16px; border:1px solid var(--line); border-radius:18px; color:var(--ink); background:#fff; cursor:pointer; text-align:left; }.app-choice:hover:not(:disabled) { transform:translateY(-2px); border-color:#aac0ae; }.app-choice.selected { background:var(--ink); color:white; border-color:var(--ink); }.app-choice:disabled { opacity:.42; }.app-choice small { margin-top:auto; font-size:11px; }.app-choice.selected small { color:#c8d1cc; }.app-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:var(--ink); background:var(--lime); font-weight:900; }.prompt-box { margin-top:22px; display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; padding:20px; border-radius:18px; color:#f8fff8; background:#1d2822; }.prompt-box p { margin:0; line-height:1.55; }.prompt-box .primary { color:var(--ink); background:var(--lime); border-color:var(--lime); }.selection-hint { margin:18px 0 0; color:var(--muted); }
.setup-status { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }.setup-status span { padding:7px 10px; border-radius:999px; color:var(--muted); background:#edf1ee; font-size:11px; }.setup-status span.ready { color:#0e5c3b; background:#d8f7e5; }
.capability-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.capability { min-height:180px; display:flex; flex-direction:column; padding:22px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,#fff,#f7fbf7); }.capability p { color:var(--muted); line-height:1.55; }.capability small { margin-top:auto; }.cards,.feed,.ledger { display:grid; gap:10px; }.skill-row { display:grid; grid-template-columns:1fr auto; gap:16px; padding:20px 0; border-top:1px solid var(--line); }.skill-row p { color:var(--muted); }.skill-row details { grid-column:1/-1; }.skill-row pre { max-height:320px; overflow:auto; padding:18px; border-radius:14px; color:#dff9e5; background:#142019; white-space:pre-wrap; }.skill-stats { display:flex; flex-direction:column; text-align:right; }.skill-stats strong { font-size:30px; }.trend { height:100px; display:flex; align-items:end; gap:6px; padding-top:20px; }.trend span { flex:1; max-width:26px; border-radius:5px 5px 0 0; background:var(--lime); }
.pill { display:inline-flex; width:max-content; margin-bottom:10px; padding:5px 8px; border-radius:999px; font:700 10px/1 ui-monospace,monospace; text-transform:uppercase; }.pill.good { color:#0e5c3b; background:#d8f7e5; }.pill.draft { color:#7b5a0c; background:#fff0bd; }.pill.warn { color:#8b3b19; background:#ffe1d5; }.pill.muted-pill { color:#58615c; background:#edf1ee; }.page-panel { min-height:660px; }.page-panel>.section-head h1,.page-panel>h1 { font-size:clamp(50px,7vw,82px); }.feed-card { display:flex; gap:15px; padding:22px 0; border-top:1px solid var(--line); }.feed-card p { margin:8px 0; font-size:18px; }.feed-card small { display:block; margin-top:13px; }.empty,.friendly-state { padding:30px; border:1px dashed #b9c8bb; border-radius:18px; color:var(--muted); background:#f8fbf8; }
.connection-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.connection-card { display:grid; grid-template-columns:auto 1fr auto; gap:15px; align-items:start; padding:20px; border:1px solid var(--line); border-radius:20px; }.connection-card h3 { margin:2px 0 6px; }.connection-card p { min-height:38px; margin:0 0 8px; color:var(--muted); font-size:13px; }.connection-card small { display:block; margin-top:8px; }.profile-head { display:flex; align-items:center; gap:24px; margin-bottom:34px; }.profile-head h1 { font-size:clamp(46px,6vw,72px); }.profile-head .lede { margin:10px 0 0; }.profile-form { max-width:700px; display:grid; gap:17px; }.published-list { margin-top:48px; }.mini-card { padding:18px 0; border-top:1px solid var(--line); }.mini-card p { color:var(--muted); }.mini-card a { color:var(--green); }.logout { margin-top:40px; }.topup { max-width:650px; display:flex; align-items:end; gap:10px; margin:30px 0 20px; }.topup label { flex:1; }.ledger { margin-top:30px; }.ledger article { display:flex; align-items:center; justify-content:space-between; padding:15px 0; border-top:1px solid var(--line); }.ledger small { display:block; margin-top:4px; }.ledger .positive { color:var(--green); }
.public-shell { min-height:calc(100vh - 140px); padding:8vh 4vw; }.public-meta { color:var(--muted); }.public-instructions,.review-box { max-width:800px; margin:36px 0; padding:24px; border:1px solid var(--line); border-radius:20px; background:#fff; }.public-instructions p,.review-box p,.review-box li { color:var(--muted); line-height:1.6; }.publish-shell>textarea { max-width:800px; margin-top:8px; }
@media(max-width:900px){.topbar{flex-wrap:wrap;gap:10px;padding:10px 16px}.topbar nav{order:3;display:flex;flex-basis:100%;justify-content:space-around}.topbar nav button{flex:1;padding:8px 4px;font-size:11px}.hero,.auth-shell{grid-template-columns:1fr}.hero-orbit{display:none}.steps{grid-template-columns:repeat(2,1fr)}.app-picker{grid-template-columns:repeat(3,1fr)}.auth-shell{padding:50px 0}.connection-grid{grid-template-columns:1fr}}
@media(max-width:620px){.topbar{padding:0 16px}.mode-switch span{display:none}main,.public-shell,.auth-shell{width:calc(100vw - 20px)}.panel{padding:24px 18px;border-radius:20px}.section-head{align-items:start}.steps,.capability-grid{grid-template-columns:1fr}.app-picker{grid-template-columns:repeat(2,1fr)}.prompt-box{grid-template-columns:1fr}.connection-card{grid-template-columns:auto 1fr}.connection-card button{grid-column:1/-1}.profile-head{align-items:flex-start}.topup{align-items:stretch;flex-direction:column}.topup>*{width:100%}.form-row{flex-direction:column}}