:root{--ink:#111827;--muted:#667085;--paper:#fff;--line:#1118271a;--ember:#2563eb;--blue:#0f766e;--sand:#f6f8fb;--shadow-soft:0 22px 60px #0f172a14;--font-display:"STZhongsong", "Songti SC", "Noto Serif SC", Georgia, serif;--font-body:"LXGW WenKai", "Kaiti SC", "Noto Serif SC", serif;--font-mono:"JetBrains Mono", "SFMono-Regular", Consolas, monospace;color:var(--ink);font-family:var(--font-body);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at 12% 8%,#2563eb17,#0000 28%),radial-gradient(circle at 88% 16%,#0f766e14,#0000 30%),linear-gradient(#fff 0%,#f8fafc 52%,#fff 100%)}*{box-sizing:border-box}body{min-width:320px;min-height:100svh;margin:0;overflow-x:hidden}button,input,textarea{font:inherit}pre,code{max-width:100%}button{border:0}#root{min-height:100svh}.shell{box-sizing:border-box;min-height:100svh;padding:36px}.practice-page{gap:16px;min-width:0;display:grid}.practice-hero{background:radial-gradient(circle at 86% 12%,#f8717129,#0000 28%),radial-gradient(circle at 10% 8%,#2563eb1f,#0000 34%),linear-gradient(135deg,#fffffffa,#f8fafce6);border:1px solid #0f172a14;border-radius:30px;padding:30px;position:relative;overflow:hidden;box-shadow:0 18px 48px #0f172a14}.practice-hero:after{content:"";background:linear-gradient(135deg,#ffffffc2,#2563eb14);border:1px solid #0f172a0f;border-radius:46% 54% 52% 48%;width:190px;height:190px;position:absolute;bottom:-74px;right:-56px}.practice-hero span{color:var(--ember);letter-spacing:.16em;align-items:center;gap:8px;font-size:13px;font-weight:900;display:inline-flex}.practice-hero h2{z-index:1;max-width:680px;color:var(--ink);font-family:var(--font-display);letter-spacing:-.055em;margin:14px 0 0;font-size:clamp(32px,5vw,56px);line-height:1.02;position:relative}.practice-hero p{z-index:1;max-width:720px;color:var(--muted);margin:18px 0 0;font-size:17px;line-height:1.85;position:relative}.practice-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.practice-flow article{background:radial-gradient(circle at 92% 10%,#2563eb1a,#0000 28%),#fffffff0;border:1px solid #0f172a14;border-radius:24px;min-width:0;padding:18px;position:relative;overflow:hidden;box-shadow:0 14px 36px #0f172a0f}.practice-flow article:nth-child(2){background:radial-gradient(circle at 92% 10%,#0f766e1c,#0000 28%),#fffffff0}.practice-flow article:nth-child(3){background:radial-gradient(circle at 92% 10%,#8d1f1f1a,#0000 28%),#fffffff0}.practice-flow article span{color:#fff;background:var(--ink);width:34px;height:34px;font-family:var(--font-mono);border-radius:12px;place-items:center;margin-bottom:14px;font-size:12px;font-weight:900;display:inline-grid}.practice-flow article strong{color:var(--ink);font-size:16px;font-weight:900;line-height:1.4;display:block}.practice-flow article p{color:var(--muted);margin:9px 0 0;font-size:14px;line-height:1.7}.practice-warning{background:linear-gradient(90deg,#8d1f1f1f 0 5px,#0000 5px),radial-gradient(circle at 94% 12%,#8d1f1f21,#0000 30%),linear-gradient(135deg,#fffffffa,#fff7edc7);border:1px solid #8d1f1f24;border-radius:24px;grid-template-columns:auto 1fr;align-items:start;gap:13px;padding:18px 20px;display:grid;position:relative;overflow:hidden;box-shadow:0 16px 38px #8d1f1f14}.practice-warning span{color:#fff;letter-spacing:.12em;background:#8d1f1f;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900;display:inline-flex}.practice-warning p{color:#5f2f22;margin:0;font-weight:800;line-height:1.75}.requirement-box{background:#fffffff0;border:1px solid #0f172a14;border-radius:28px;gap:14px;padding:18px;display:grid;box-shadow:0 16px 42px #0f172a0f}.requirement-heading{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.requirement-heading span{color:var(--ink);font-size:16px;font-weight:900}.requirement-heading small{color:var(--muted);font-size:13px;font-weight:800}.requirement-box textarea{box-sizing:border-box;resize:vertical;width:100%;min-height:240px;color:var(--ink);font:inherit;background:linear-gradient(#f8fafcf5,#ffffffeb);border:1px solid #0f172a1a;border-radius:22px;outline:none;padding:18px;font-size:16px;line-height:1.78;transition:border-color .18s,box-shadow .18s,background .18s;box-shadow:inset 0 1px #fffc}.requirement-box textarea:focus{background:#fff;border-color:#2563eb6b;box-shadow:inset 0 1px #ffffffe6,0 0 0 5px #2563eb14}.requirement-box textarea::placeholder{color:#64748bd1}.requirement-tips{flex-wrap:wrap;gap:8px;display:flex}.requirement-tips span{color:#475569;background:#f8fafce6;border:1px solid #0f172a14;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:800;line-height:1.45}.practice-actions{background:linear-gradient(135deg,#0f172af5,#1e293bf0);border:1px solid #0f172a14;border-radius:26px;justify-content:space-between;align-items:center;gap:16px;padding:16px;display:flex;box-shadow:0 18px 44px #0f172a24}.practice-actions button{color:#0f172a;cursor:pointer;background:#fff;border:1px solid #ffffff29;border-radius:18px;flex:none;padding:13px 18px;font-weight:900;box-shadow:0 10px 26px #00000029}.practice-actions p{color:#ffffffb8;margin:0;line-height:1.65}.generated-prompt-card{background:#fffffff5;border:1px solid #0f172a14;border-radius:28px;overflow:hidden;box-shadow:0 18px 46px #0f172a14}.generated-prompt-header{background:linear-gradient(135deg,#f8fafcfa,#ffffffeb);border-bottom:1px solid #0f172a14;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;display:flex}.generated-prompt-header strong{color:var(--ink);font-size:15px;font-weight:900}.generated-prompt-header button{color:var(--ink);cursor:pointer;background:#fff;border:1px solid #0f172a1a;border-radius:13px;flex:none;padding:8px 13px;font-weight:900}.generated-prompt-card pre{color:#1e293b;max-height:520px;font-family:var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;scrollbar-width:thin;scrollbar-color:#0f172a3d #0f172a0f;background:#f8fafc;margin:0;padding:18px;font-size:13px;line-height:1.78;overflow:hidden auto}.generated-prompt-card pre::-webkit-scrollbar{width:10px}.generated-prompt-card pre::-webkit-scrollbar-track{background:#0f172a0d}.generated-prompt-card pre::-webkit-scrollbar-thumb{background:#0f172a38;border:3px solid #f8fafc;border-radius:999px}.result-guide{background:radial-gradient(circle at 92% 10%,#0f766e1a,#0000 30%),linear-gradient(135deg,#fffffffa,#f0fdfa9e);border:1px solid #0f172a14;border-radius:28px;gap:14px;padding:22px;display:grid;box-shadow:0 18px 46px #0f172a12}.result-guide-title span{color:#0f766e;letter-spacing:.14em;margin-bottom:8px;font-size:12px;font-weight:900;display:inline-flex}.result-guide-title h3{color:var(--ink);font-family:var(--font-display);letter-spacing:-.05em;margin:0;font-size:clamp(28px,4vw,42px);line-height:1.05}.result-map{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.result-map article{background:#ffffffd1;border:1px solid #0f172a14;border-radius:20px;min-width:0;padding:16px}.result-map strong{color:var(--ink);font-size:15px;font-weight:900;display:block}.result-map p{color:var(--muted);margin:9px 0 0;font-size:14px;line-height:1.7}@media (width<=860px){.practice-hero{border-radius:26px;padding:24px}.practice-hero h2{font-size:clamp(30px,10vw,44px)}.practice-flow,.result-map,.practice-warning{grid-template-columns:1fr}.requirement-heading{flex-direction:column;align-items:flex-start}.requirement-box{border-radius:24px;padding:14px}.requirement-box textarea{border-radius:18px;min-height:280px}.practice-actions{border-radius:24px;flex-direction:column;align-items:stretch}.practice-actions button{width:100%}.generated-prompt-header{flex-direction:column;align-items:stretch}.generated-prompt-header button{width:100%}}.loading-shell{place-items:center;display:grid}.loading-card{border:1px solid var(--line);box-shadow:var(--shadow-soft);background:#ffffffe0;border-radius:18px;align-items:center;gap:12px;padding:18px 22px;display:inline-flex}.loading-card p{color:var(--muted);margin:0}.loading-dot{background:var(--ember);border-radius:999px;width:10px;height:10px;box-shadow:0 0 0 8px #2563eb1a}.onboarding-shell{flex-direction:column;justify-content:center;align-items:center;gap:34px;width:min(100%,680px);margin:0 auto;display:flex}.product-mark,.kicker{color:var(--ink);letter-spacing:.12em;text-transform:uppercase;font-size:13px;font-weight:800;display:inline-flex}.onboarding-intro{text-align:center;max-width:720px}.onboarding-intro h1,.workspace-header h1{color:var(--ink);font-family:var(--font-display);letter-spacing:-.05em;margin:0;font-size:clamp(38px,6vw,72px);line-height:1.02}.onboarding-intro p,.workspace-header p{max-width:740px;color:var(--muted);margin:20px auto 0;font-size:18px;line-height:1.8}.mode-grid{grid-template-columns:1fr;gap:12px;width:100%;display:grid}.tutorial-grid{gap:14px}.mode-card{border:1px solid var(--line);text-align:left;cursor:pointer;background:#fff;border-radius:22px;min-height:auto;padding:22px 72px 22px 22px;transition:transform .18s,border-color .18s,box-shadow .18s;position:relative;box-shadow:0 12px 34px #0f172a0f}.mode-card:before{display:none}.mode-card:hover{border-color:#2563eb5c;transform:translateY(-2px);box-shadow:0 18px 44px #0f172a1a}.mode-card strong{color:var(--ink);font-family:var(--font-display);letter-spacing:-.04em;font-size:28px;display:block}.mode-card h2,.guide-card h2{color:var(--ink);font-family:var(--font-display);letter-spacing:-.03em;margin:14px 0 0;font-size:22px;line-height:1.08}.mode-card p,.guide-card p{color:var(--muted);margin:16px 0 0;line-height:1.75}.mode-arrow{border:1px solid var(--line);width:38px;height:38px;color:var(--ink);font-family:var(--font-mono);background:#fff;border-radius:999px;place-items:center;font-size:20px;font-weight:900;display:grid;position:absolute;top:50%;right:22px;transform:translateY(-50%)}.tutorial-card{overflow:hidden}.html-tutorial-card{background:radial-gradient(circle at 86% 10%,#0f766e1f,#0000 28%),radial-gradient(circle at 8% 12%,#2563eb1a,#0000 32%),#fff}.html-tutorial-card strong{color:#0f766e}.tutorial-card-disabled{cursor:default;background:radial-gradient(circle at 86% 10%,#64748b1a,#0000 28%),#ffffffbd}.tutorial-card-disabled:hover{border-color:var(--line);transform:none;box-shadow:0 12px 34px #0f172a0f}.tutorial-card-disabled strong,.tutorial-card-disabled h2,.tutorial-card-disabled p{color:#475569b8}.tutorial-card-disabled .mode-arrow{color:#47556985;background:#f8fafcdb}.workspace-shell{gap:26px;display:grid}.workspace-header{border:1px solid var(--line);box-shadow:var(--shadow-soft);background:#ffffffe6;border-radius:30px;justify-content:space-between;align-items:flex-end;gap:20px;padding:34px;display:flex}.workspace-header h1{font-size:clamp(34px,4vw,62px)}.ghost-button{color:var(--ink);cursor:pointer;background:#ffffffb8;border:1px solid #0f172a1f;border-radius:14px;flex:none;padding:12px 16px;font-weight:800}.workspace-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}.guide-card{border:1px solid var(--line);background:linear-gradient(180deg, #fffffff5, #f8fafce0), var(--paper);min-height:220px;box-shadow:var(--shadow-soft);border-radius:26px;padding:28px}.guide-card.wide{grid-column:1/-1}.step-index{color:#fff;background:var(--ink);letter-spacing:.08em;border-radius:999px;justify-content:center;align-items:center;min-width:42px;height:32px;padding:0 10px;font-size:12px;font-weight:900;display:inline-flex}.code-panel{background:radial-gradient(circle at 14% 16%,#0f766e1a,#0000 30%),linear-gradient(#fffffff5,#f8fafce6)}.experienced-page{width:min(100% - 32px,920px);max-width:100%;min-height:100svh;margin:0 auto;padding:78px 0 56px;position:relative}.step-tabs{z-index:8;scrollbar-width:none;border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffeb;border-radius:999px;gap:8px;width:100%;max-width:100%;margin:0 auto 22px;padding:8px;display:flex;position:sticky;top:18px;overflow-x:auto;box-shadow:0 12px 34px #0f172a14}.step-tabs::-webkit-scrollbar{display:none}.step-tabs button{color:var(--muted);cursor:pointer;background:0 0;border-radius:999px;flex:none;grid-template-columns:30px auto;align-items:center;gap:8px;padding:3px 14px;font-size:13px;font-weight:800;text-decoration:none;transition:background .16s,color .16s;display:grid}.step-tabs button:hover{color:var(--ink);background:#0f172a0a}.step-tabs button.active{color:var(--ink);background:#0f172a12}.step-tabs .mode-reset-tab{color:var(--ink);background:#0f172a0f;grid-template-columns:auto;margin-left:auto}.step-tabs span{width:30px;height:30px;color:var(--ink);font-family:var(--font-mono);background:#0f172a0f;border-radius:999px;place-items:center;font-size:13px;font-weight:900;display:grid}.step-tabs strong{font-size:13px;font-weight:800}.intro-sections{gap:20px;display:grid}.intro-overview{background:radial-gradient(circle at 88% 8%,#2563eb24,#0000 30%),radial-gradient(circle at 8% 10%,#0f766e1c,#0000 34%),linear-gradient(135deg,#fffffffa,#f8fafce0);border:1px solid #0f172a14;border-radius:32px;padding:30px;position:relative;overflow:hidden;box-shadow:0 18px 46px #0f172a12}.intro-overview span{color:#fff;background:var(--ink);letter-spacing:.14em;border-radius:999px;margin-bottom:12px;padding:6px 10px;font-size:12px;font-weight:900;display:inline-flex}.intro-overview h2{max-width:680px;color:var(--ink);font-family:var(--font-display);letter-spacing:-.055em;margin:0;font-size:clamp(34px,5vw,56px);line-height:1}.intro-overview p{max-width:740px;color:var(--muted);margin:16px 0 0;font-size:17px;line-height:1.85}.intro-section{background:radial-gradient(circle at 96% 4%,#2563eb1c,#0000 28%),linear-gradient(135deg,#fffffffa,#f8fafcdb),#fff;border:1px solid #0f172a14;border-radius:32px;gap:20px;padding:30px;display:grid;position:relative;overflow:hidden;box-shadow:0 18px 46px #0f172a12}.intro-section:nth-child(2){background:radial-gradient(circle at 96% 4%,#0f766e1f,#0000 28%),linear-gradient(135deg,#fffffffa,#f0fdfa9e),#fff}.intro-section:nth-child(3){background:radial-gradient(circle at 96% 4%,#7c3aed1f,#0000 28%),linear-gradient(135deg,#fffffffa,#f5f3ff9e),#fff}.intro-title-row{align-items:flex-start;gap:16px;display:flex}.intro-icon{color:#fff;background:var(--ink);width:52px;height:52px;font-family:var(--font-mono);border-radius:18px;flex:none;place-items:center;font-size:15px;font-weight:900;display:grid;box-shadow:0 12px 28px #0f172a29}.intro-section:nth-child(2) .intro-icon{background:#0f766e}.intro-section:nth-child(3) .intro-icon{background:#6d28d9}.intro-eyebrow{color:var(--muted);letter-spacing:.14em;margin:2px 0 7px;font-size:12px;font-weight:900;display:inline-flex}.intro-title-row h2{color:var(--ink);font-family:var(--font-display);letter-spacing:-.055em;margin:0;font-size:clamp(34px,5vw,52px);line-height:.98}.intro-explain-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:12px;display:grid}.intro-explain-card{background:#ffffffc2;border:1px solid #0f172a14;border-radius:22px;min-width:0;padding:18px;box-shadow:inset 0 1px #ffffffb8}.intro-explain-card span,.intro-checklist>span{color:var(--ink);margin-bottom:9px;font-size:13px;font-weight:900;display:inline-flex}.intro-explain-card p{color:var(--muted);margin:0;font-size:15px;line-height:1.82}.intro-plain{background:linear-gradient(#ffffffe0,#f8fafcb8)}.intro-professional{background:linear-gradient(#ffffffe0,#f1f5f9b3)}.intro-checklist{background:linear-gradient(135deg,#0f172a09,#ffffffad);border:1px solid #0f172a14;border-radius:24px;padding:18px}.intro-checklist ul{gap:10px;margin:0;padding:0;list-style:none;display:grid}.intro-checklist li{color:var(--ink);padding:0 0 0 22px;font-size:15px;line-height:1.72;position:relative}.intro-checklist li:before{content:"";background:var(--ember);width:8px;height:8px;color:var(--ember);border-radius:999px;position:absolute;top:.72em;left:0;transform:translateY(-50%)}.intro-section:nth-child(2) .intro-checklist li:before{background:#0f766e}.intro-section:nth-child(3) .intro-checklist li:before{background:#6d28d9}.template-placeholder{background:#ffffffb8;border:1px dashed #0f172a33;border-radius:26px;margin-top:26px;padding:30px}.section-index{color:var(--ember);font-family:var(--font-mono);margin-bottom:14px;font-size:13px;font-weight:900;display:inline-flex}.template-placeholder h2{color:var(--ink);font-family:var(--font-display);letter-spacing:-.04em;margin:0;font-size:34px}.template-placeholder p{color:var(--muted);margin:10px 0 0}.preview-page{gap:16px;min-width:0;display:grid}.preview-toolbar{border:1px solid var(--line);background:#fff;border-radius:24px;justify-content:space-between;align-items:flex-end;gap:18px;min-width:0;padding:22px;display:flex;box-shadow:0 12px 34px #0f172a0f}.preview-toolbar h2{color:var(--ink);font-family:var(--font-display);letter-spacing:-.04em;margin:0;font-size:30px}.preview-toolbar p{color:var(--muted);margin:8px 0 0;line-height:1.7}.preview-actions{flex:none;gap:10px;display:flex}.preview-actions button{color:var(--ink);cursor:pointer;background:#0f172a0f;border-radius:999px;padding:10px 13px;font-size:14px;font-weight:900}.preview-actions button:first-child{color:#fff;background:var(--ink)}.css-switch-hint{background:linear-gradient(90deg,#0f172af5 0 5px,#0000 5px),radial-gradient(circle at 94% 8%,#0f766e1a,#0000 26%),linear-gradient(135deg,#fffffff5,#f8fafcdb);border:1px solid #0f172a14;border-radius:22px;padding:18px 20px;position:relative;overflow:hidden;box-shadow:0 16px 38px #0f172a17}.css-switch-hint:after{content:"";background:radial-gradient(circle,#0f766e29,#0000 68%);border-radius:999px;width:140px;height:140px;position:absolute;bottom:-42px;right:-34px}.css-switch-badge{color:#fff;background:var(--ink);letter-spacing:.12em;border-radius:999px;margin-bottom:10px;padding:5px 9px;font-size:12px;font-weight:900;display:inline-flex}.css-switch-hint strong{z-index:1;color:var(--ink);font-size:19px;font-weight:900;line-height:1.45;display:block;position:relative}.css-switch-hint p{z-index:1;color:var(--muted);margin:8px 0 0;line-height:1.75;position:relative}.css-template-switcher{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0;display:grid}.css-template-switcher button{text-align:left;cursor:pointer;background:radial-gradient(circle at 92% 12%,#2563eb1a,#0000 30%),#fff;border:1px solid #0f172a14;border-radius:22px;min-width:0;padding:16px 18px;transition:border-color .18s,box-shadow .18s,transform .18s;position:relative;overflow:hidden;box-shadow:0 12px 32px #0f172a0f}.css-template-switcher button:nth-child(2){background:radial-gradient(circle at 92% 12%,#8d1f1f21,#0000 30%),#fff}.css-template-switcher button:hover{transform:translateY(-1px);box-shadow:0 16px 38px #0f172a17}.css-template-switcher button.active{border-color:#0f172a42;box-shadow:0 18px 42px #0f172a1f,inset 0 0 0 2px #0f172a14}.css-template-switcher em{color:var(--ink);background:#0f172a0f;border-radius:999px;padding:5px 8px;font-size:11px;font-style:normal;font-weight:900;position:absolute;top:14px;right:14px}.css-template-switcher button.active em{color:#fff;background:var(--ink)}.css-template-switcher strong{color:var(--ink);font-family:var(--font-display);letter-spacing:-.04em;padding-right:74px;font-size:24px;line-height:1.05;display:block}.css-template-switcher span{color:var(--muted);margin-top:8px;font-size:14px;line-height:1.55;display:block}.preview-window{border:1px solid var(--line);background:radial-gradient(circle at 18% 0,#2563eb14,#0000 26%),linear-gradient(#eef2f7,#f8fafc);border-radius:28px;min-width:0;min-height:560px;padding:18px;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffffb3}.preview-replay-float{z-index:4;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172adb;border:1px solid #ffffff85;border-radius:999px;padding:10px 13px;font-size:13px;font-weight:900;position:absolute;top:16px;right:16px;box-shadow:0 12px 32px #0f172a2e}.chat-preview-surface{background:radial-gradient(circle at 16% 12%,#ffffffc7,#0000 30%),linear-gradient(#eef3f8,#e7edf5);border-radius:22px;min-width:0;min-height:524px;padding:22px;overflow:hidden}.chat-preview-row{margin-bottom:18px;display:flex}.user-row{justify-content:flex-end}.assistant-row{justify-content:flex-start}.chat-bubble{border-radius:24px;min-width:0;max-width:min(680px,92%)}.user-bubble{color:#fff;background:#111827;border-bottom-right-radius:8px;padding:13px 16px;box-shadow:0 10px 26px #0f172a29}.assistant-bubble{min-width:min(640px,100%);box-shadow:none;background:0 0;border:1px solid #0000;border-bottom-left-radius:8px;padding:12px}.preview-render{overflow-wrap:anywhere;word-break:break-word;min-height:120px}.preview-render-frame{border:0;width:100%;min-height:160px;display:block;overflow:hidden;background:0 0!important}.css-code-panel{box-sizing:border-box;resize:vertical;color:#1e293b;width:100%;max-width:100%;min-height:460px;max-height:460px;font-family:var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;scrollbar-color:#0f172a3d #0f172a0d;scrollbar-width:thin;background:#fff;border:0;border-top:1px solid #0f172a14;border-radius:0 0 22px 22px;outline:none;margin:0;padding:20px;font-size:13px;line-height:1.65;overflow:hidden auto}.css-code-panel:focus{background:linear-gradient(#fff,#f8fafceb);box-shadow:inset 0 0 0 2px #2563eb29}.css-code-panel::-webkit-scrollbar{width:10px}.css-code-panel::-webkit-scrollbar-track{background:#0f172a0d;border-radius:999px}.css-code-panel::-webkit-scrollbar-thumb{background:#0f172a3d;border:2px solid #fff;border-radius:999px}.css-code-panel::-webkit-scrollbar-thumb:hover{background:#0f172a61}.css-code-panel code{min-width:0;white-space:inherit;font-family:inherit;display:block}.example-code-card{background:#fff;border:1px solid #0f172a1a;border-radius:22px;min-width:0;overflow:hidden;box-shadow:0 18px 46px #0f172a14}.editable-code-hint{background:linear-gradient(90deg,#0f766e1f 0 5px,#0000 5px),linear-gradient(135deg,#f0fdfae6,#fffffff5);border-bottom:1px solid #0f172a14;padding:15px 16px}.editable-code-hint strong{color:var(--ink);font-size:15px;font-weight:900;display:block}.editable-code-hint p{color:var(--muted);margin:6px 0 0;font-size:14px;line-height:1.65}.example-code-header{background:linear-gradient(135deg,#f8fafcfa,#fffffff0);justify-content:space-between;align-items:center;gap:14px;min-width:0;padding:16px;display:flex}.example-code-header h3{color:var(--ink);font-family:var(--font-display);letter-spacing:-.04em;margin:0;font-size:24px}.example-code-tools{justify-content:flex-end;align-items:center;gap:10px;min-width:0;display:flex}.example-code-tabs{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.example-code-tabs button{color:#475569eb;cursor:pointer;background:#0f172a0d;border-radius:999px;padding:8px 11px;font-size:13px;font-weight:900}.example-code-tabs button.active{color:#fff;background:var(--ink)}.restore-code-button{color:var(--ink);cursor:pointer;background:#fff;border:1px solid #0f172a1a;border-radius:999px;flex:none;padding:8px 11px;font-size:13px;font-weight:900}@media (width<=860px){.example-code-tools{flex-direction:column;align-items:stretch;width:100%}.restore-code-button{width:100%}}.floating-pager{z-index:12;border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffe6;border-radius:999px;gap:10px;padding:8px;display:flex;position:fixed;bottom:24px;right:24px;box-shadow:0 18px 46px #0f172a24}.floating-pager button{color:#fff;background:var(--ink);cursor:pointer;width:44px;height:44px;font-family:var(--font-mono);border-radius:999px;place-items:center;font-size:20px;font-weight:900;display:grid}.floating-pager button:disabled{color:#0f172a47;cursor:not-allowed;background:#0f172a0f}@media (width<=860px){.shell{padding:22px 16px}.onboarding-shell{justify-content:flex-start;gap:26px;padding-top:54px}.hero-panel,.mode-grid,.workspace-header,.workspace-grid{grid-template-columns:1fr}.onboarding-intro h1{font-size:38px}.onboarding-intro p{font-size:16px;line-height:1.7}.workspace-header{align-items:flex-start}.experienced-page{width:calc(100% - 24px);padding-top:78px}.step-tabs{width:100%;top:12px}.intro-section{border-radius:26px;padding:22px}.intro-explain-grid{grid-template-columns:1fr}.intro-title-row{align-items:flex-start}.intro-icon{border-radius:14px;width:42px;height:42px}.intro-explain-card,.intro-checklist{border-radius:20px;padding:16px}.preview-toolbar{flex-direction:column;align-items:stretch}.preview-actions{grid-template-columns:1fr;display:grid}.css-template-switcher{grid-template-columns:1fr}.css-template-switcher button{padding:15px}.preview-window{width:100%;min-height:520px;padding:10px}.preview-replay-float{top:14px;right:14px}.chat-preview-surface{min-height:500px;padding:12px}.chat-bubble{max-width:100%}.assistant-bubble{width:100%;min-width:0}.example-code-header{flex-direction:column;align-items:stretch}.example-code-tabs{justify-content:flex-start}.example-code-tabs button{white-space:nowrap;flex:auto;min-width:0}.css-code-panel{max-width:100%;font-size:12px}.css-code-panel code{min-width:100%}.floating-pager{bottom:16px;right:16px}.floating-pager button{width:40px;height:40px}}