:root{--font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--serif:Georgia, "Times New Roman", serif;--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--sidebar-width:380px;--radius:10px;--radius-sm:7px;--ease:cubic-bezier(.2, .8, .2, 1);--accent:#c9a45c;--accent-strong:#b58d43;--accent-ink:#1b1a14;--danger:#e5646b;--ok:#58b587}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#15181d;--bg-elev:#1c2027;--bg-panel:#20252d;--bg-input:#13161b;--bg-hover:#262c35;--stage:#0f1114;--stage-grid:#ffffff09;--border:#2c333d;--border-strong:#3a434f;--text:#e9ecef;--text-muted:#8f99a5;--text-faint:#5f6873;--shadow:0 20px 50px #00000073, 0 2px 8px #00000059;--ring:#c9a45c59}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f4f4f1;--bg-elev:#fff;--bg-panel:#fff;--bg-input:#f7f7f5;--bg-hover:#f0efea;--stage:#e6e6e1;--stage-grid:#0000000a;--border:#e2e1da;--border-strong:#cfcdc3;--text:#1f2328;--text-muted:#5f6772;--text-faint:#9aa1aa;--shadow:0 18px 44px #14181e24, 0 2px 6px #14181e14;--ring:#b58d4359}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.45}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app{flex-direction:column;height:100vh;min-height:100%;display:flex}.workspace{flex:auto;min-height:0;display:flex}.topbar{height:64px;color:var(--text);background:var(--topbar-bg);border-bottom:1px solid var(--topbar-border);isolation:isolate;justify-content:space-between;align-items:center;gap:16px;padding:0 18px 0 16px;display:flex;position:relative;overflow:hidden}:root[data-theme=dark]{--topbar-bg:linear-gradient(180deg, #1a2030 0%, #151a24 100%);--topbar-border:#2a3242;--topbar-skyline:#7f9bc4;--topbar-glow:#c9a45c29}:root[data-theme=light]{--topbar-bg:linear-gradient(180deg, #fff 0%, #f5f6f8 100%);--topbar-border:#dfe2e8;--topbar-skyline:#4c6488;--topbar-glow:#c9a45c38}.topbar:before{content:"";z-index:-1;background:radial-gradient(420px 120px at 6% 100%, var(--topbar-glow), transparent 70%);pointer-events:none;position:absolute;inset:0}.topbar-skyline{z-index:-1;width:min(70%,900px);height:100%;color:var(--topbar-skyline);pointer-events:none;position:absolute;bottom:0;right:0;-webkit-mask-image:linear-gradient(90deg,#0000,#000 25%);mask-image:linear-gradient(90deg,#0000,#000 25%)}.brand{align-items:center;gap:12px;min-width:0;display:flex}.brand-mark{width:38px;height:38px;color:var(--accent-ink);background:linear-gradient(145deg, #e8cb85, var(--accent) 55%, var(--accent-strong));border-radius:10px;place-items:center;display:grid;box-shadow:inset 0 1px #fff6,0 6px 16px #c9a45c47}.brand-text h1{font-family:var(--serif);letter-spacing:.2px;white-space:nowrap;align-items:baseline;gap:8px;margin:0;font-size:18px;font-weight:400;line-height:1.2;display:flex}.brand-jp{font-family:var(--font);letter-spacing:1.5px;color:var(--accent);border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);background:color-mix(in srgb, var(--accent) 10%, transparent);border-radius:4px;padding:3px 6px 2px;font-size:11px;font-weight:600;line-height:1;transform:translateY(-2px)}.brand-text p{color:var(--text-muted);white-space:nowrap;margin:2px 0 0;font-size:12px}.topbar-actions{align-items:center;gap:8px;display:flex}.topbar-clock{border:1px solid var(--border);background:color-mix(in srgb, var(--bg-elev) 70%, transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);height:30px;color:var(--text-muted);white-space:nowrap;border-radius:999px;align-items:center;gap:7px;margin-right:6px;padding:0 11px;font-size:12px;display:inline-flex}.topbar-clock time{font-variant-numeric:tabular-nums;color:var(--text);font-weight:600}.topbar-clock-dot{background:var(--ok);width:7px;height:7px;box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent);border-radius:50%}@media (width<=1100px){.brand-text p,.topbar-clock{display:none}}.btn{border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--bg-panel);height:34px;color:var(--text);white-space:nowrap;transition:background .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);align-items:center;gap:7px;padding:0 12px;font-size:13px;font-weight:500;text-decoration:none;display:inline-flex}.btn:hover:not(:disabled){background:var(--bg-hover);border-color:var(--text-faint)}.btn:active:not(:disabled){transform:translateY(1px)}.btn-ghost{color:var(--text-muted);background:0 0;border-color:#0000}.btn-ghost:hover:not(:disabled){color:var(--text);border-color:#0000}.btn-icon{justify-content:center;width:34px;padding:0}.btn-xs{gap:5px;height:26px;padding:0 8px;font-size:12px}.btn-group{display:inline-flex}.btn-group .btn{border-radius:0}.btn-group .btn:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}.btn-group .btn:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}.btn-group .btn+.btn{margin-left:-1px}.sidebar{flex:0 0 var(--sidebar-width);width:var(--sidebar-width);background:var(--bg);border-right:1px solid var(--border);flex-direction:column;gap:14px;padding:16px;display:flex;overflow-y:auto}.panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:10px;padding:14px;display:flex}.panel-grow{flex:auto;min-height:260px}.panel-title{letter-spacing:.7px;text-transform:uppercase;color:var(--text-muted);align-items:center;gap:8px;margin:0;font-size:12px;font-weight:600;display:flex}.step{width:18px;height:18px;color:var(--accent-ink);background:var(--accent);border-radius:50%;place-items:center;font-size:10.5px;font-weight:700;display:grid}.label{letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted);align-items:baseline;gap:8px;font-size:11px;font-weight:600;display:flex}.label-meta{letter-spacing:0;text-transform:none;color:var(--text-faint);font-weight:500}.tag{border:1px solid var(--border-strong);letter-spacing:.4px;height:18px;color:var(--text-muted);background:var(--bg-input);border-radius:5px;align-items:center;padding:0 6px;font-size:10.5px;font-weight:600;display:inline-flex}.tag-soft{color:var(--accent);letter-spacing:0;text-transform:none;background:#c9a45c24;border-color:#0000;font-weight:500}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.source{flex-direction:column;gap:10px;display:flex}.source-options{grid-template-columns:1fr 1fr;gap:8px;display:grid}.source-option{text-align:left;border-radius:var(--radius-sm);border:1px dashed var(--border-strong);background:var(--bg-input);color:var(--text);transition:border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);flex-direction:column;align-items:flex-start;gap:10px;padding:12px;display:flex}.source-option:hover:not(:disabled){border-color:var(--accent);background:var(--bg-hover)}.source-option.is-active{border-style:solid;border-color:var(--accent);background:var(--bg-panel);box-shadow:0 0 0 3px var(--ring)}.source-option-icon{width:36px;height:36px;color:var(--accent);background:#c9a45c24;border-radius:9px;place-items:center;display:grid}.source-option.is-active .source-option-icon{color:var(--accent-ink);background:var(--accent)}.source-option-text{flex-direction:column;gap:3px;display:flex}.source-option-title{font-family:var(--serif);font-size:15px;line-height:1.2}.source-option-desc{color:var(--text-muted);font-size:11.5px;line-height:1.35}.source-error{color:var(--danger);align-items:center;gap:6px;margin:0;font-size:12px;display:flex}.source-file{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-input);align-items:center;gap:10px;padding:8px 8px 8px 10px;display:flex}.source-file-icon{width:28px;height:28px;color:var(--accent);background:#c9a45c24;border-radius:7px;flex:none;place-items:center;display:grid}.source-file-text{flex-direction:column;flex:auto;min-width:0;display:flex}.source-file-name{text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;overflow:hidden}.source-file-meta{color:var(--text-muted);font-size:11.5px}.source-file-actions{flex:none;align-items:center;gap:2px;display:inline-flex}.btn-icon-xs{justify-content:center;width:26px;padding:0}.source-text summary{cursor:pointer;color:var(--text-muted);font-size:11.5px}.source-text summary:hover{color:var(--text)}.source-text pre{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-input);max-height:180px;font-family:var(--mono);white-space:pre-wrap;word-break:break-word;color:var(--text-muted);margin:8px 0 0;padding:10px 12px;font-size:11.5px;line-height:1.5;overflow:auto}.panel-sub{border-top:1px solid var(--border);flex-direction:column;gap:8px;margin-top:4px;padding-top:12px;display:flex}.panel-sub .label{margin:0}.template-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.template-card{--card-accent:var(--accent);text-align:left;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-input);transition:border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);flex-direction:column;align-items:flex-start;gap:6px;padding:11px 12px 12px;display:flex;position:relative}.template-card:hover{border-color:var(--border-strong);background:var(--bg-hover)}.template-card.is-active{border-color:var(--card-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--card-accent) 22%, transparent);background:var(--bg-panel)}.template-card-top{justify-content:space-between;align-items:center;width:100%;display:flex}.brand-strip{display:inline-flex}.brand-strip i{border:2px solid var(--bg-panel);border-radius:50%;width:14px;height:14px;margin-left:-5px}.brand-strip i:first-child{margin-left:0}.template-langs{gap:4px;display:inline-flex}.template-name{font-family:var(--serif);color:var(--text);font-size:15px;line-height:1.2}.template-desc{color:var(--text-muted);font-size:11.5px;line-height:1.35}.segmented{border-radius:var(--radius-sm);background:var(--bg-input);border:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:3px;padding:3px;display:inline-flex}.segmented button{height:28px;color:var(--text-muted);transition:background .15s var(--ease), color .15s var(--ease);background:0 0;border:0;border-radius:5px;align-items:center;gap:7px;padding:0 11px;font-size:13px;font-weight:500;display:inline-flex}.segmented button:hover{color:var(--text)}.segmented button.is-active{background:var(--bg-panel);color:var(--text);box-shadow:0 1px 2px #00000040, 0 0 0 1px var(--border-strong)}.segmented-code{letter-spacing:.4px;color:var(--text-faint);font-size:10.5px;font-weight:600}.segmented button.is-active .segmented-code{color:var(--accent)}.segmented-hint{color:var(--text-faint);padding:0 8px;font-size:11.5px}.segmented-icons button span:nth-child(2){display:inline}.editor{flex-direction:column;flex:auto;gap:8px;min-height:0;display:flex}.editor-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.editor-actions{gap:2px;display:inline-flex}.editor-area{resize:vertical;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-input);width:100%;min-height:180px;color:var(--text);font-family:var(--mono);tab-size:2;transition:border-color .15s var(--ease), box-shadow .15s var(--ease);flex:auto;padding:12px 14px;font-size:12.5px;line-height:1.55}.editor-area:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring);outline:none}.editor-area.is-invalid{border-color:var(--danger)}.editor-area.is-invalid:focus{box-shadow:0 0 0 3px #e5646b40}.editor-error{min-height:18px;color:var(--danger);opacity:0;transition:opacity .15s var(--ease);align-items:center;gap:6px;margin:0;font-size:12px;display:flex}.editor-error.is-visible{opacity:1}.preview{flex-direction:column;flex:auto;min-width:0;display:flex}.preview-bar{background:var(--bg-elev);border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:10px 18px;display:flex}.preview-status{min-width:0;color:var(--text-muted);align-items:center;gap:9px;font-size:13px;display:flex}.preview-status-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dot{background:var(--ok);width:8px;height:8px;box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);border-radius:50%;flex:none}.dot.is-error{background:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent)}.preview-status:has(.dot.is-error){color:var(--danger)}.preview-tools{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.preview-stage{background-color:var(--stage);background-image:linear-gradient(var(--stage-grid) 1px, transparent 1px), linear-gradient(90deg, var(--stage-grid) 1px, transparent 1px);background-size:24px 24px;flex:auto;justify-content:center;align-items:flex-start;padding:28px 24px 40px;display:flex;overflow:auto}.device{max-width:100%;height:100%;min-height:900px;box-shadow:var(--shadow);transition:width .25s var(--ease);background:#fff;border-radius:12px;flex:none;overflow:hidden}.preview-stage.is-mobile .device{box-shadow:var(--shadow), inset 0 0 0 1px #ffffff0f;border:8px solid #101215;border-radius:28px}.device-screen{width:100%;height:100%;min-height:inherit;background:#fff;border:0;display:block}.preview-stage.is-empty{align-items:center}.preview-empty{text-align:center;border-radius:var(--radius);border:1px dashed var(--border-strong);background:var(--bg-panel);max-width:320px;color:var(--text-muted);flex-direction:column;align-items:center;gap:14px;padding:32px 28px;display:flex}.preview-empty-icon{width:44px;height:44px;color:var(--accent);background:#c9a45c24;border-radius:12px;place-items:center;display:grid}.preview-empty p{margin:0;font-size:13px;line-height:1.5}@media (width<=900px){.app{height:auto;min-height:100vh}.workspace{flex-direction:column}.sidebar{border-right:0;border-bottom:1px solid var(--border);flex-basis:auto;width:auto;overflow:visible}.panel-grow{min-height:0}.editor-area{min-height:160px}.preview-stage{padding:16px 12px 28px}.preview-stage.is-empty{min-height:260px}.device{min-height:700px}.brand-text p,.segmented-icons button span:nth-child(2){display:none}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}