:root{--paper: #f7f2e9;--paper-2: #fffdf8;--paper-3: #f0e9dc;--ink: #201b14;--muted: #8b8272;--accent: #e8430f;--accent-soft: rgba(232, 67, 15, .09);--green: #4a8f3c;--line: rgba(32, 27, 20, .14);--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--display: "Fraunces", "Noto Serif SC", Georgia, serif;--cn-serif: "Noto Serif SC", "Songti SC", serif}*{margin:0;padding:0;box-sizing:border-box}html{color-scheme:light}body{background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}.page{position:relative;max-width:1180px;margin:0 auto;padding:0 32px 64px;min-height:100vh}.grain{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes pop{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}.reveal{animation:rise .55s cubic-bezier(.22,1,.36,1) both}.reveal-pop{animation:pop .35s cubic-bezier(.22,1,.36,1) both}@media(prefers-reduced-motion:reduce){.reveal,.reveal-pop{animation:none}}.topbar{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-bottom:1.5px solid var(--ink)}.brand{display:flex;align-items:center;gap:12px}.brand-cn{font-family:var(--cn-serif);font-weight:700;font-size:24px;letter-spacing:.12em}.brand-divider{width:1px;height:22px;background:var(--ink);opacity:.35;transform:rotate(18deg)}.brand-sub{font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);border:1.5px solid var(--accent);border-radius:999px;padding:3px 12px;background:var(--accent-soft)}.topbar-right{display:flex;align-items:center;gap:16px}.topbar-note{color:var(--muted);font-size:11px;letter-spacing:.22em;text-transform:uppercase}@media(max-width:720px){.topbar-note{display:none}}.agent-link{font-size:12px;color:var(--muted);text-decoration:none;border:1px dashed var(--line);border-radius:999px;padding:5px 12px;white-space:nowrap;transition:color .15s,border-color .15s}.agent-link:hover{color:var(--accent);border-color:var(--accent)}.foot-link{color:var(--muted);text-decoration:underline}.foot-link:hover{color:var(--accent)}.auth-area{display:flex;align-items:center;gap:10px}.auth-phone{font-size:12px;font-weight:600}.auth-btn{font-family:var(--mono);font-size:12px;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;padding:5px 14px;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s,background .15s}.auth-btn:hover{color:var(--accent);border-color:var(--accent)}.auth-btn.primary{color:var(--accent);border:1.5px solid var(--accent);background:var(--accent-soft);font-weight:600}.auth-btn.primary:hover{color:var(--paper-2);background:var(--accent)}.hero{padding:56px 0 40px}.hero-title{font-family:var(--display);font-weight:420;font-size:clamp(34px,5vw,58px);line-height:1.18;letter-spacing:-.005em}.hero-title em{font-style:italic;color:var(--accent)}.hero-sub{margin-top:16px;color:var(--muted);font-size:13px;letter-spacing:.05em}.workbench{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:900px){.workbench{grid-template-columns:1fr}}.panel{border:1.5px solid var(--ink);background:var(--paper-2);border-radius:12px;display:flex;flex-direction:column;min-height:560px;overflow:hidden;box-shadow:4px 4px #201b141f}.panel-head{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line);gap:10px}.panel-head-actions{display:flex;align-items:center;gap:12px}.panel-label{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);white-space:nowrap}.tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.tab{font-family:var(--mono);font-size:12px;color:var(--muted);background:transparent;border:1px solid transparent;border-radius:999px;padding:5px 13px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}.tab:hover{color:var(--ink)}.tab.active{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);font-weight:600}.editor-wrap{position:relative;flex:1;display:flex}.editor{flex:1;width:100%;resize:none;border:none;outline:none;background:transparent;color:var(--ink);font-family:var(--mono);font-size:13px;line-height:1.7;padding:18px;caret-color:var(--accent)}.editor::placeholder{color:#8b8272a6}.sample-btn{position:absolute;right:16px;bottom:16px;font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--paper);border:1px dashed var(--line);border-radius:6px;padding:6px 12px;cursor:pointer;transition:color .15s,border-color .15s}.sample-btn:hover{color:var(--accent);border-color:var(--accent)}.dropzone{flex:1;margin:18px;border:1.5px dashed rgba(32,27,20,.3);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);text-align:center;cursor:pointer;background:var(--paper);transition:border-color .15s,background .15s,color .15s}.dropzone:hover,.dropzone.dragging{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}.dropzone-icon{font-size:30px;color:var(--accent)}.dropzone-file{color:var(--ink);font-weight:600}.dropzone-hint{font-size:11px;color:var(--muted)}.clear-btn{font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:6px 14px;cursor:pointer;margin-top:4px;transition:color .15s,border-color .15s}.clear-btn:hover{color:var(--accent);border-color:var(--accent)}.update-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;padding:12px 18px;border:1.5px dashed var(--accent);border-radius:10px;background:var(--accent-soft);font-size:13px}.update-banner strong{color:var(--accent)}.update-cancel{font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:5px 12px;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}.update-cancel:hover{color:var(--accent);border-color:var(--accent)}.dropzone code{color:var(--accent)}.panel-foot{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-top:1px solid var(--line);gap:12px}.meta{color:var(--muted);font-size:12px}.publish-btn{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--paper-2);background:var(--accent);border:1.5px solid var(--accent);border-radius:7px;padding:10px 22px;cursor:pointer;white-space:nowrap;transition:transform .12s,box-shadow .12s,opacity .15s}.publish-btn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:3px 3px #201b1440}.publish-btn:active:not(:disabled){transform:none;box-shadow:none}.publish-btn:disabled{opacity:.35;cursor:not-allowed}.progress-track{height:4px;background:var(--paper-3)}.progress-fill{height:100%;background:var(--accent);transition:width .2s ease}.error-bar{padding:10px 18px;border-top:1px solid rgba(232,67,15,.45);background:var(--accent-soft);color:#b53309;font-size:12px}.sandbox-tag{font-size:11px;color:var(--green);letter-spacing:.1em;cursor:help;white-space:nowrap}.sandbox-tag.live{color:var(--accent);cursor:default}.expand-btn{font-family:var(--mono);font-size:11px;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:5px;padding:4px 10px;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}.expand-btn:hover{color:var(--accent);border-color:var(--accent)}.preview-frame{flex:1;margin:18px;border-radius:8px;overflow:hidden;background:#fff;border:1px solid var(--line);display:flex}.preview{width:100%;height:100%;border:none;display:block;background:#fff;flex:1}.preview-media{flex:1;display:flex;align-items:center;justify-content:center;background:repeating-conic-gradient(#eee,#eee 25%,#fff 0%,#fff 50%) 0 0 / 20px 20px;overflow:auto;padding:16px}.preview-media img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 2px 16px #00000026}.preview-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--paper);color:var(--muted);text-align:center;padding:20px}.preview-empty-mark{font-size:34px;color:var(--accent);opacity:.8}.file-tree{flex:1;overflow:auto;background:var(--paper);padding:12px 16px;font-size:12px}.file-tree-row{display:flex;justify-content:space-between;gap:16px;padding:4px 0;border-bottom:1px dashed rgba(32,27,20,.1)}.file-tree-path{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-tree-size{color:var(--muted);white-space:nowrap}.file-tree-more{padding:8px 0;color:var(--muted)}.result-bar{margin-top:20px;display:flex;align-items:center;gap:16px;padding:16px 20px;border:1.5px solid var(--accent);border-radius:12px;background:linear-gradient(90deg,var(--accent-soft),var(--paper-2) 60%);box-shadow:4px 4px #e8430f2e;flex-wrap:wrap}.result-label{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);white-space:nowrap}.result-url{flex:1;min-width:200px;color:var(--ink);text-decoration:none;font-size:13px;overflow-wrap:anywhere}.result-url:hover{text-decoration:underline;text-decoration-color:var(--accent)}.result-actions{display:flex;gap:8px}.copy-btn{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--paper-2);background:var(--accent);border:1.5px solid var(--accent);border-radius:6px;padding:8px 16px;cursor:pointer;transition:background .15s,border-color .15s}.copy-btn.copied{background:var(--green);border-color:var(--green)}.open-btn{font-size:12px;color:var(--ink);border:1.5px solid var(--ink);border-radius:6px;padding:8px 16px;text-decoration:none;transition:border-color .15s,color .15s}.open-btn:hover{border-color:var(--accent);color:var(--accent)}.result-note{width:100%;font-size:12px;color:var(--muted)}.result-note-link{font-family:var(--mono);font-size:12px;color:var(--accent);background:none;border:none;padding:0;cursor:pointer;text-decoration:underline}.auth-modal{width:min(400px,92vw);background:var(--paper-2);border:1.5px solid var(--ink);border-radius:12px;box-shadow:8px 8px #201b1440;padding:26px;display:flex;flex-direction:column;gap:16px}.auth-tabs{display:flex;gap:8px}.auth-field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}.auth-field input{font-family:var(--mono);font-size:14px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:10px 12px;outline:none;transition:border-color .15s}.auth-field input:focus{border-color:var(--accent)}.auth-error{font-size:12px;color:#b53309}.auth-submit{width:100%}.auth-hint{font-size:11px;color:var(--muted);line-height:1.6}.recent-copy.danger:hover{color:#b53309;border-color:#b53309}.my-item{grid-template-columns:1fr auto auto auto auto auto}.update-banner-text{display:flex;flex-direction:column;gap:4px}.update-banner-steps{font-size:12px;color:var(--muted)}.recent{margin-top:48px}.recent-title{font-family:var(--display);font-style:italic;font-weight:480;font-size:22px;margin-bottom:14px}.recent-list{list-style:none;border-top:1.5px solid var(--ink)}.recent-item{display:grid;grid-template-columns:1fr auto auto auto auto auto;gap:16px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line);font-size:12px}.recent-copy:disabled{opacity:.4;cursor:not-allowed}.recent-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recent-url{color:var(--accent);text-decoration:none}.recent-url:hover{text-decoration:underline}.recent-time{color:var(--muted)}.recent-copy{font-family:var(--mono);font-size:11px;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:5px;padding:4px 10px;cursor:pointer;transition:color .15s,border-color .15s}.recent-copy:hover{color:var(--accent);border-color:var(--accent)}.recent-copy:active{color:var(--green);border-color:var(--green)}@media(max-width:640px){.recent-item{grid-template-columns:1fr auto auto}.recent-time{display:none}}.foot{margin-top:64px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:11px;letter-spacing:.04em}.fullscreen-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#201b148c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;animation:pop .2s ease both}.fullscreen-inner{width:100%;height:100%;max-width:1500px;background:var(--paper-2);border:1.5px solid var(--ink);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:8px 8px #201b1440}.fullscreen-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line)}.fullscreen-close{font-family:var(--mono);font-size:12px;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:5px;padding:5px 12px;cursor:pointer;transition:color .15s,border-color .15s}.fullscreen-close:hover{color:var(--accent);border-color:var(--accent)}.fullscreen-body{flex:1;display:flex;background:#fff}