@import "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@300;400;500&family=Noto+Sans+JP:wght@100..900&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-base:#080706;--bg-surface:#111009;--bg-elevated:#1a1813;--bg-hover:#221f18;--border:#2c271e;--border-mid:#3d3629;--text-primary:#ede5d4;--text-secondary:#8a7d6a;--text-muted:#4a4236;--accent:#c8922a;--accent-dim:#c8922a1f;--accent-glow:#c8922a40;--accent-hover:#dfa030;--font-display:"Cormorant Garamond", Georgia, serif;--font-mono:"JetBrains Mono", "Courier New", monospace;--radius:4px;--radius-lg:8px;--transition:.2s ease}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{background-color:var(--bg-base);color:var(--text-primary);font-family:var(--font-mono);min-height:100svh;font-weight:300;line-height:1.6}#root,.app{flex-direction:column;min-height:100svh;display:flex}.app-header{border-bottom:1px solid var(--border);flex-shrink:0;padding:0 24px}.header-inner{align-items:center;gap:16px;max-width:900px;margin:0 auto;padding:20px 0;display:flex}.header-mark{color:var(--accent);opacity:.9;flex-shrink:0;font-size:22px;line-height:1}.header-text{flex-direction:column;gap:2px;display:flex}.header-title{font-family:var(--font-display);letter-spacing:.04em;color:var(--text-primary);font-size:28px;font-weight:500;line-height:1}.header-subtitle{font-family:var(--font-mono);color:var(--text-secondary);letter-spacing:.06em;font-size:11px;font-weight:300}.app-main{flex:1;justify-content:center;padding:48px 24px;display:flex}.workspace{flex-direction:column;gap:20px;width:100%;max-width:900px;display:flex}.upload-section{flex-direction:column;align-items:center;gap:20px;width:100%;animation:.35s both fadeUp;display:flex}.upload-actions{flex-direction:column;align-items:center;gap:10px;width:100%;display:flex}.upload-hint{color:var(--text-muted);letter-spacing:.04em;text-align:center;font-size:11px}.btn--sm{padding:6px 12px;font-size:11px}.editor-badge--placeholder{color:var(--text-secondary);background:#8a7d6a1a;border-color:#8a7d6a33}.dropzone{border:1px dashed var(--border-mid);border-radius:var(--radius-lg);background:var(--bg-surface);cursor:pointer;width:100%;transition:border-color var(--transition), background var(--transition), box-shadow var(--transition);outline:none;flex-direction:column;align-items:center;gap:10px;padding:56px 32px;display:flex;position:relative}.dropzone:before{content:"";border-radius:var(--radius-lg);background:linear-gradient(135deg, var(--accent-dim) 0%, transparent 60%);pointer-events:none;opacity:0;transition:opacity var(--transition);position:absolute;inset:-1px}.dropzone:hover,.dropzone:focus-visible{border-color:var(--accent);background:var(--bg-elevated)}.dropzone:hover:before,.dropzone:focus-visible:before{opacity:1}.dropzone--dragging{border-color:var(--accent);background:var(--bg-elevated);box-shadow:0 0 0 1px var(--accent-dim), 0 0 32px var(--accent-glow)}.dropzone--dragging:before{opacity:1}.dropzone__icon{color:var(--accent);opacity:.7;transition:transform var(--transition), opacity var(--transition);margin-bottom:6px}.dropzone:hover .dropzone__icon,.dropzone--dragging .dropzone__icon{opacity:1;transform:translateY(-3px)scale(1.05)}.dropzone__main{font-family:var(--font-display);color:var(--text-primary);letter-spacing:.01em;font-size:20px;font-weight:500}.dropzone__sub{color:var(--text-secondary);font-size:12px;font-weight:300}.dropzone__link{color:var(--accent);text-underline-offset:3px;text-decoration:underline;-webkit-text-decoration-color:var(--accent-glow);text-decoration-color:var(--accent-glow)}.dropzone__types{letter-spacing:.1em;color:var(--text-muted);margin-top:4px;font-size:10px}.text-inputs{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);flex-direction:column;gap:8px;padding:16px;display:flex}.text-input-row{align-items:center;gap:12px;display:flex}.text-input-label{color:var(--text-secondary);letter-spacing:.06em;flex-shrink:0;min-width:3em;font-size:11px}.text-input{background:var(--bg-elevated);border:1px solid var(--border-mid);border-radius:var(--radius);color:var(--text-primary);font-family:var(--font-mono);transition:border-color var(--transition);outline:none;flex:1;padding:7px 10px;font-size:13px;font-weight:300}.text-input:focus{border-color:var(--accent)}.text-input::placeholder{color:var(--text-muted)}.editor-section{flex-direction:column;gap:16px;width:100%;animation:.3s both fadeUp;display:flex}.editor-meta{align-items:center;gap:12px;padding-bottom:4px;display:flex}.editor-filename{color:var(--text-secondary);letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap;max-width:400px;font-size:11px;font-weight:300;overflow:hidden}.editor-badge{letter-spacing:.08em;color:var(--accent);background:var(--accent-dim);border:1px solid #c8922a33;border-radius:2px;flex-shrink:0;padding:2px 8px;font-size:10px}.canvas-frame{border-radius:var(--radius-lg);border:1px solid var(--border-mid);width:100%;box-shadow:0 0 0 1px var(--bg-base), 0 4px 24px #0009;background:#000;position:relative;overflow:hidden}.canvas-frame:after{content:"";border-radius:var(--radius-lg);pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff0a}.preview-canvas{width:100%;height:auto;display:block}.action-bar{justify-content:space-between;align-items:center;gap:12px;padding-top:4px;display:flex}.btn{border-radius:var(--radius);font-family:var(--font-mono);letter-spacing:.04em;cursor:pointer;transition:background var(--transition), color var(--transition), box-shadow var(--transition);white-space:nowrap;border:none;outline:none;align-items:center;gap:7px;padding:9px 16px;font-size:12px;font-weight:400;text-decoration:none;display:inline-flex}.btn:focus-visible{box-shadow:0 0 0 2px var(--accent-glow)}.btn--ghost{color:var(--text-secondary);border:1px solid var(--border);background:0 0}.btn--ghost:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--border-mid)}.btn--primary{background:var(--accent);color:#0a0806;border:1px solid #0000;font-weight:500}.btn--primary:hover{background:var(--accent-hover);box-shadow:0 2px 12px var(--accent-glow)}.btn--primary:active{transform:translateY(1px)}.app-footer{border-top:1px solid var(--border);text-align:center;flex-shrink:0;padding:16px 24px}.app-footer p{color:var(--text-muted);letter-spacing:.04em;font-size:11px}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (width<=600px){.app-main{padding:32px 16px}.header-inner{padding:16px 0}.dropzone{padding:40px 20px}.action-bar{flex-direction:column-reverse;align-items:stretch}.btn{justify-content:center;padding:11px 16px}.editor-filename{max-width:200px}}