.drop-page{flex-direction:column;height:100dvh;display:flex;overflow:hidden}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.topbar{border-bottom:1px solid var(--border-subtle);z-index:10;background:var(--bg-deep);flex-shrink:0;align-items:center;gap:16px;height:52px;padding:0 20px;display:flex}.topbar-brand{font-family:var(--font-display);color:var(--text);letter-spacing:-.03em;flex-shrink:0;font-size:1.2rem;font-weight:700;line-height:1;text-decoration:none}.topbar-dot{color:var(--accent)}.topbar-upload{background:var(--surface);border:1px solid var(--border);width:30px;height:30px;color:var(--text-dim);cursor:pointer;transition:color var(--transition),border-color var(--transition),background-color var(--transition);animation:fadeIn .3s var(--ease-out);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;font-size:.85rem;display:flex}.topbar-upload:hover{color:var(--accent);border-color:var(--accent-dim);background:var(--surface-raised)}.view-toggle{background:var(--surface);border:1px solid var(--border);animation:fadeIn .3s var(--ease-out);border-radius:6px;display:flex;overflow:hidden}.view-btn{border:none;border-right:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono);letter-spacing:.03em;cursor:pointer;transition:background-color var(--transition),color var(--transition);white-space:nowrap;background:0 0;padding:5px 12px;font-size:.68rem}.view-btn:last-child{border-right:none}.view-btn:hover{color:var(--text);background:var(--surface-raised)}.view-btn.active{color:var(--accent);background:var(--surface-raised);font-weight:600}.topbar-meta{align-items:center;gap:12px;margin-left:auto;display:flex}.file-chip{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);animation:fadeIn .3s var(--ease-out);border-radius:6px;align-items:center;gap:6px;padding:3px 10px;font-size:.7rem;display:flex}.file-chip button{color:var(--text-dim);cursor:pointer;transition:color var(--transition);background:0 0;border:none;padding:0;font-size:.9rem;line-height:1}.file-chip button:hover{color:var(--error)}.byte-count{color:var(--text-ghost);font-size:.68rem;font-family:var(--font-mono);letter-spacing:.04em;animation:fadeIn .3s var(--ease-out)}.byte-count.over-limit{color:var(--error);font-weight:600}.workspace{min-height:0;transition:grid-template-columns .5s var(--ease-out);flex:1;grid-template-columns:1fr 0fr;display:grid;position:relative}.workspace.mode-split{grid-template-columns:1fr 1fr}.workspace.mode-preview{grid-template-columns:0fr 1fr}.workspace.mode-code{grid-template-columns:1fr 0fr}.editor-pane{flex-direction:column;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden}.editor{resize:none;width:100%;min-height:0;color:var(--text);font-family:var(--font-mono);tab-size:2;background:0 0;border:none;outline:none;flex:1;padding:24px;font-size:13px;line-height:1.7}.editor::placeholder{color:var(--text-ghost)}.editor::-webkit-scrollbar{width:6px}.editor::-webkit-scrollbar-track{background:0 0}.editor::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.editor::-webkit-scrollbar-thumb:hover{background:var(--text-ghost)}.editor-pane.has-error{animation:.3s shake}.idle-prompt{pointer-events:auto;cursor:pointer;animation:fadeIn .8s var(--ease-out);flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:absolute;inset:0}.idle-arrow{color:var(--accent);opacity:.45;text-shadow:0 0 24px var(--accent-glow);font-size:2.5rem;animation:2.5s ease-in-out infinite float}.idle-text{font-family:var(--font-display);color:var(--text-dim);letter-spacing:-.01em;font-size:1.15rem;font-weight:500}.idle-hints{color:var(--text-ghost);letter-spacing:.04em;align-items:center;gap:8px;font-size:.72rem;display:flex}.idle-sep{opacity:.4}.browse-btn{color:var(--accent-dim);font-family:var(--font-mono);letter-spacing:.04em;cursor:pointer;text-underline-offset:3px;transition:color var(--transition),text-decoration-color var(--transition);background:0 0;border:none;padding:0;font-size:.72rem;-webkit-text-decoration:underline #0000;text-decoration:underline #0000}.browse-btn:hover{color:var(--accent);-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent)}.preview-pane{opacity:0;min-width:0;min-height:0;transition:opacity .4s .15s;position:relative;overflow:hidden}.workspace.mode-split .preview-pane,.workspace.mode-preview .preview-pane{opacity:1}.preview-pane:before{content:"";background:var(--accent);opacity:0;z-index:2;width:1px;box-shadow:0 0 8px var(--accent-glow),0 0 24px var(--accent-glow);transition:opacity .4s .3s;position:absolute;top:0;bottom:0;left:0}.workspace.mode-split .preview-pane:before{opacity:.45}.browser-chrome{background:var(--surface);flex-direction:column;height:100%;display:flex}.browser-bar{background:var(--surface-raised);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:8px;padding:10px 16px;display:flex}.browser-dots{flex-shrink:0;gap:6px;display:flex}.bdot{border-radius:50%;width:10px;height:10px;display:block}.bdot-red{background:#ff5f57}.bdot-yellow{background:#febc2e}.bdot-green{background:#28c840}.browser-url{text-align:center;flex:1;overflow:hidden}.url-label{font-family:var(--font-mono);color:var(--text-ghost);letter-spacing:.04em;white-space:nowrap;text-overflow:ellipsis;font-size:.66rem;display:block;overflow:hidden}.browser-spacer{flex-shrink:0;width:38px}.browser-viewport{flex:1;min-height:0;position:relative;overflow:hidden}.browser-viewport:after{content:"";pointer-events:none;z-index:1;background:linear-gradient(#00000014,#0000);height:4px;position:absolute;top:0;left:0;right:0}.preview-iframe{background:#fff;border:none;width:100%;height:100%;display:block}.preview-empty{background:var(--surface);flex-direction:column;justify-content:center;align-items:center;gap:12px;height:100%;display:flex}.preview-empty-glyph{color:var(--text-ghost);opacity:.4;font-size:1.6rem}.preview-empty-label{color:var(--text-ghost);letter-spacing:.04em;font-size:.72rem}.toolbar{border-top:1px solid var(--border-subtle);background:var(--bg-deep);animation:slideUp .35s var(--ease-out);flex-direction:column;flex-shrink:0;gap:8px;padding:12px 20px;display:flex}.toolbar-row{align-items:center;gap:12px;display:flex}.toolbar-hints{color:var(--text-ghost);letter-spacing:.04em;justify-content:center;align-items:center;gap:8px;font-size:.64rem;display:flex}.toolbar-hints a{color:var(--text-dim);transition:color var(--transition);text-decoration:none}.toolbar-hints a:hover{color:var(--accent)}.hint-sep{opacity:.4}.pw-input{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);min-width:120px;max-width:200px;color:var(--text);font-family:var(--font-mono);transition:border-color var(--transition),box-shadow var(--transition);outline:none;flex:1;padding:8px 12px;font-size:.75rem}.pw-input::placeholder{color:var(--text-dim)}.pw-input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-glow)}.exp-group{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);display:flex;overflow:hidden}.exp-group input[type=radio]{opacity:0;width:0;height:0;position:absolute}.exp-group label{color:var(--text-muted);cursor:pointer;transition:background-color var(--transition),color var(--transition);border-right:1px solid var(--border);-webkit-user-select:none;user-select:none;white-space:nowrap;padding:8px 12px;font-size:.75rem}.exp-group label:last-of-type{border-right:none}.exp-group label:hover{color:var(--text);background:var(--surface-raised)}.exp-group input[type=radio]:checked+label{background:var(--accent);color:#0a0a0b;font-weight:600}.exp-group input[type=radio]:focus-visible+label{outline:2px solid var(--accent);outline-offset:-2px}.pub-btn{background:var(--accent);color:#0a0a0b;border-radius:var(--radius);font-family:var(--font-mono);letter-spacing:.08em;cursor:pointer;white-space:nowrap;transition:opacity var(--transition),transform 80ms ease,box-shadow var(--transition);box-shadow:0 0 12px var(--accent-glow);border:none;margin-left:auto;padding:8px 28px;font-size:.8rem;font-weight:700;position:relative;overflow:hidden}.pub-btn:hover:not(:disabled){opacity:.92;box-shadow:0 0 24px var(--accent-glow-strong),0 0 0 1px var(--accent-dim)}.pub-btn:active:not(:disabled){transform:scale(.98)}.pub-btn:disabled{opacity:.3;cursor:not-allowed;box-shadow:none}.pub-btn.loading{pointer-events:none}.result-bar{border-top:1px solid var(--border);background:var(--bg-deep);animation:slideUp .4s var(--ease-out);flex-shrink:0;padding:16px 20px}.result-status{align-items:center;gap:8px;margin-bottom:12px;display:flex}.result-check{color:var(--success);font-size:1rem;font-weight:700}.result-title{color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}.result-url-row{gap:8px;margin-bottom:10px;display:flex}.result-url{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--accent);font-family:var(--font-mono);cursor:text;text-overflow:ellipsis;white-space:nowrap;outline:none;flex:1;padding:8px 12px;font-size:.78rem;overflow:hidden}.result-url:focus{border-color:var(--border-focus)}.copy-btn{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);font-family:var(--font-mono);cursor:pointer;transition:color var(--transition),border-color var(--transition);white-space:nowrap;text-align:center;min-width:72px;padding:8px 14px;font-size:.75rem}.copy-btn:hover{color:var(--text);border-color:var(--text-dim)}.copy-btn.copied{color:var(--success);border-color:var(--success)}.result-meta{justify-content:space-between;align-items:center;display:flex}.result-expires{color:var(--text-ghost);font-size:.7rem}.reset-btn{color:var(--text-muted);font-family:var(--font-mono);cursor:pointer;transition:color var(--transition);background:0 0;border:none;padding:2px 0;font-size:.72rem}.reset-btn:hover{color:var(--accent)}.drop-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none;opacity:0;z-index:50;background:#0a0a0be0;border-radius:0;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:absolute;inset:0}.drop-overlay.visible{opacity:1}.drop-overlay-inner{flex-direction:column;align-items:center;gap:14px;display:flex}.drop-glyph{color:var(--accent);text-shadow:0 0 32px var(--accent-glow-strong);font-size:2.5rem;animation:1.5s ease-in-out infinite float}.drop-label{font-family:var(--font-display);color:var(--accent);letter-spacing:.02em;font-size:1.15rem;font-weight:600}.error-toast{background:var(--error-bg);border-radius:var(--radius);color:var(--error);font-size:.78rem;font-family:var(--font-mono);z-index:100;animation:toastIn .3s var(--ease-out);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap;border:1px solid #f8717133;padding:10px 24px;position:fixed;top:68px;left:50%;transform:translate(-50%)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes toastIn{0%{opacity:0;transform:translate(-50%)translateY(-8px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(10px)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@media (max-width:768px){.topbar{gap:10px;height:48px;padding:0 14px}.topbar-brand{font-size:1.05rem}.workspace{transition:grid-template-rows .5s var(--ease-out);grid-template-rows:1fr 0fr;grid-template-columns:1fr}.workspace.mode-split{grid-template-rows:1fr 1fr;grid-template-columns:1fr}.workspace.mode-preview{grid-template-rows:0fr 1fr;grid-template-columns:1fr}.workspace.mode-code{grid-template-rows:1fr 0fr;grid-template-columns:1fr}.preview-pane:before{width:100%;height:1px;box-shadow:0 0 8px var(--accent-glow),0 0 20px var(--accent-glow);inset:0 0 auto}.toolbar-row{flex-wrap:wrap}.pw-input{flex:100%;min-width:0;max-width:none}.exp-group{flex:1}.exp-group label{text-align:center;flex:1;padding:8px}.pub-btn{text-align:center;flex:100%;margin-left:0;padding:10px 24px}.editor{padding:16px}.view-btn{padding:5px 8px;font-size:.64rem}}@media (max-width:420px){.file-chip{display:none}.idle-text{font-size:1rem}.idle-arrow{font-size:2rem}}