:root{--canvas: #ffffff;--parchment: #f5f5f7;--pearl: #fafafc;--ink: #1d1d1f;--ink-80: #333336;--muted: #7a7a7a;--faint: #a1a1a6;--hairline: #e0e0e0;--divider: rgba(0, 0, 0, .06);--edge: rgba(0, 0, 0, .08);--accent: #0066cc;--accent-hover: #0071e3;--focus: #0071e3;--ok: #248a3d;--warn: #a74f00;--err: #d70015;--r-sm: 8px;--r-md: 12px;--r-lg: 18px;--r-pill: 9999px;--ease: cubic-bezier(.16, 1, .3, 1);--font-display: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;--font-text: "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--parchment);color:var(--ink);font-family:var(--font-text);font-size:15px;line-height:1.55;letter-spacing:-.1px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}::placeholder{color:var(--faint)}.app{max-width:980px;margin:0 auto;padding:0 28px}.page{padding:4px 0 104px}.global-nav{position:sticky;top:0;z-index:100;background:#161617d1;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.global-nav-inner{max-width:980px;margin:0 auto;padding:0 28px;height:48px;display:flex;align-items:center;justify-content:space-between}.brand{color:#f5f5f7;text-decoration:none;font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:.1px}.global-nav-links{display:flex;gap:26px}.nav-link{color:#d2d2d7;text-decoration:none;font-size:12px;letter-spacing:-.01px;transition:color .2s var(--ease)}.nav-link:hover{color:#f5f5f7}.stepper{position:sticky;top:48px;z-index:90;display:flex;align-items:center;gap:24px;list-style:none;margin:20px -28px 36px;padding:0 28px;height:52px;overflow-x:auto;background:#f5f5f7d1;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--divider)}.stepper li{flex:none;font-size:13px;letter-spacing:-.06px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}.stepper li.completed{color:var(--ink);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s var(--ease)}.stepper li.completed:hover,.stepper li.active{color:var(--accent)}h2{font-family:var(--font-display);font-size:28px;font-weight:600;line-height:1.14;letter-spacing:-.34px;margin:36px 0 14px}.page>h2:first-child{margin-top:28px}h3{font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-.24px;margin:0 0 12px}button{font:inherit;letter-spacing:inherit;color:var(--ink);background:var(--pearl);border:none;border-radius:var(--r-pill);padding:8px 18px;cursor:pointer;box-shadow:inset 0 0 0 1px #0000000f;transition:transform .25s var(--ease),background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}button:hover{background:#ececee}button:active{transform:scale(.96)}button:disabled{opacity:.45;cursor:not-allowed;transform:none}button.primary{background:var(--accent);color:#fff;box-shadow:none}button.primary:hover{background:var(--accent-hover)}button.link{background:none;box-shadow:none;border-radius:0;padding:0;color:var(--accent);font-size:13px;transform:none}button.link:hover{background:none;text-decoration:underline}a.btn-anchor{display:inline-flex;align-items:center;background:var(--accent);color:#fff;text-decoration:none;border-radius:var(--r-pill);padding:8px 18px;font-size:14px;transition:transform .25s var(--ease),background-color .2s var(--ease)}a.btn-anchor:hover{background:var(--accent-hover)}a.btn-anchor:active{transform:scale(.96)}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}:where(a,button):focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}input:not([type=range]),textarea,select{font:inherit;letter-spacing:inherit;width:100%;border:1px solid var(--edge);border-radius:var(--r-md);padding:10px 14px;background:var(--canvas);color:var(--ink);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}input:not([type=range]):focus,textarea:focus,select:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 4px #0071e32e}textarea{resize:vertical;line-height:1.6}input[type=range]{accent-color:var(--accent);width:100%}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}.card{background:var(--canvas);border:1px solid rgba(0,0,0,.05);border-radius:var(--r-lg);padding:26px 28px}.card>h3{margin-bottom:12px}.card.done{border-color:#248a3d59}.hint{color:var(--muted);font-size:13px;letter-spacing:-.06px}.ok{color:var(--ok)}.warn{color:var(--warn)}.err{color:var(--err)}code{font-family:var(--font-mono);font-size:12.5px;letter-spacing:0;background:#0000000b;padding:2px 6px;border-radius:6px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.row-actions{margin-top:14px}.form{display:flex;flex-direction:column;gap:16px;max-width:520px}.form label{display:flex;flex-direction:column;gap:6px;font-size:14px;letter-spacing:-.06px}.project-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.project-item{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;border-radius:var(--r-md);transition:border-color .2s var(--ease)}.project-item:hover{border-color:#c7c7cc}.project-item a{color:var(--ink);font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-.2px}.project-item a:hover{color:var(--accent);text-decoration:none}.project-item .hint{font-variant-numeric:tabular-nums}.project-meta{display:flex;align-items:center;gap:18px}button.link.danger{color:var(--err)}.chat{display:flex;flex-direction:column;gap:16px}.chat-log{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow-y:auto;padding:4px 2px}.bubble{max-width:78%;padding:12px 16px;border-radius:var(--r-lg);font-size:15px;line-height:1.55;white-space:pre-wrap}.bubble.user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:6px}.bubble.assistant{align-self:flex-start;background:var(--canvas);border:1px solid var(--divider);border-bottom-left-radius:6px}.chat-input{display:flex;flex-direction:column;gap:10px}.prd-pre{font-family:var(--font-text);white-space:pre-wrap;font-size:14px;line-height:1.65;letter-spacing:-.06px;margin:0}.prd-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}.prd-head h3{margin:0}.platform-pick{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.platform-label{font-size:12px;color:var(--muted)}.chip-btn,.chip-btn.primary{padding:4px 12px;font-size:12px}.qf{display:flex;flex-direction:column;gap:16px}.qf-item{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--divider)}.qf-q{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:-.2px;line-height:1.4}.qf-opts{display:flex;flex-direction:column;gap:8px}.qf-opt{text-align:left;border-radius:var(--r-md);padding:10px 14px;font-size:14px;line-height:1.45}.qf-opt:hover{background:var(--canvas)}.qf-opt.selected,.qf-other input.selected{box-shadow:inset 0 0 0 2px var(--focus);border-color:transparent;background:var(--canvas)}.qf-other{display:flex;align-items:center;gap:8px}.qf-other-label{flex:none;font-size:12px;color:var(--muted)}.qf-pending{font-size:12px;color:var(--muted)}.qf-other input{width:auto;flex:1 1 auto;min-width:0;border-radius:var(--r-pill);padding:8px 12px}.round-list{display:flex;flex-direction:column}.round-item{padding:12px 0;border-bottom:1px solid var(--divider);font-size:13px;line-height:1.5;white-space:pre-wrap}.round-item:last-child{border-bottom:none}.round-a{color:var(--muted)}.style-stage{display:flex;flex-direction:column;gap:16px}.dial-row{display:grid;grid-template-columns:96px 1fr 32px;gap:4px 12px;align-items:center;margin:10px 0}.dial-row .dial-hint{grid-column:2 / 4}.dial-value{text-align:right;font-variant-numeric:tabular-nums;font-size:14px}.style-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:14px}.style-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:16px;border-radius:var(--r-md);font-size:14px}.style-card:hover{border-color:#c7c7cc;background:var(--canvas)}.style-card.selected{box-shadow:inset 0 0 0 2px var(--focus);border-color:transparent;background:var(--canvas)}.style-card strong{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:-.2px}.style-card .swatch{width:36px;height:36px;border-radius:8px;border:1px solid var(--divider)}.style-card p{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}.brand-pick{display:flex;flex-direction:column;gap:6px;margin-top:14px;max-width:520px;font-size:14px;letter-spacing:-.06px}.prototype-stage,.interaction-stage,.diagrams-stage,.html-stage{display:flex;flex-direction:column;gap:16px}.screen-list{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column}.screen-list li{padding:14px 0;border-bottom:1px solid var(--divider)}.screen-list li:last-child{border-bottom:none;padding-bottom:2px}.screen-list strong{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:-.2px}.screen-group-title{margin:16px 0 4px;font-size:13px;font-weight:600}.screen-group .screen-list{margin-top:0}.screen-preview{width:100%;max-width:423px;height:940px;display:block;margin:12px auto 0;border:1px solid var(--edge);border-radius:var(--r-md);background:var(--canvas)}.screen-preview-wide{max-width:none;height:auto;aspect-ratio:1440 / 1050}.issue-list{list-style:disc;padding-left:20px;margin:6px 0;font-size:13px;color:var(--ink-80)}.issue-list li{margin:4px 0}.err-note{font-size:13px;margin:0 0 8px}.mono-area{font-family:var(--font-mono);font-size:13px;letter-spacing:0;line-height:1.6}.element-groups{display:flex;flex-direction:column;gap:16px}.group-name{font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:-.06px}.seg{display:inline-flex;flex-wrap:wrap;gap:2px;background:#0000000d;border-radius:11px;padding:3px;margin-bottom:18px}.seg-btn{background:transparent;box-shadow:none;border-radius:9px;padding:6px 14px;font-size:13px;color:var(--ink-80)}.seg-btn:hover{background:transparent;color:var(--ink)}.seg-btn:active{transform:none}.seg-btn.active{background:var(--canvas);color:var(--ink);box-shadow:0 1px 3px #0000001a}.seg-btn.error{color:var(--err)}.mermaid-container{background:var(--parchment);border-radius:var(--r-md);padding:20px;overflow-x:auto}.mermaid-container svg{max-width:100%;height:auto}.html-preview{width:100%;height:1040px;border:1px solid var(--edge);border-radius:var(--r-md);background:var(--canvas)}.artifact-table,.spec-table{width:100%;border-collapse:collapse;font-size:14px;letter-spacing:-.06px;margin-top:10px}.artifact-table th,.spec-table th{text-align:left;font-weight:400;color:var(--muted);font-size:12px;padding:8px 12px 8px 0;border-bottom:1px solid var(--edge)}.artifact-table td,.spec-table td{padding:10px 12px 10px 0;border-bottom:1px solid var(--divider);vertical-align:top}.artifact-table code{font-size:12px}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media(max-width:720px){.app{padding:0 20px}.stepper{margin-left:-20px;margin-right:-20px;padding:0 20px;gap:18px}.card{padding:20px}}