body{display:flex;justify-content:center;align-items:center;overflow:hidden}#app{width:100%;height:100vh;position:relative}.list-link{position:absolute;top:clamp(1rem,3vw,3rem);left:clamp(1rem,3vw,3rem);background:var(--card-bg);border:1px solid var(--card-border);color:var(--text-muted);padding:.5rem .875rem;border-radius:8px;text-decoration:none;font-weight:400;font-size:.85rem;transition:all .2s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10;opacity:.6;display:inline-flex;align-items:center;gap:.375rem}.list-link:hover{background:var(--hover-bg);color:var(--text-main);border-color:#ffffff26;opacity:1;transform:translateY(-1px)}.theme-toggle{position:absolute;top:clamp(1rem,3vw,3rem);left:clamp(7.5rem,12vw,9.5rem)}.main-container{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(1rem,2vw,2rem);gap:1rem}.mode-toggle{display:flex;gap:0;background:var(--card-bg);border:1px solid var(--card-border);border-radius:.75rem;padding:.25rem;box-shadow:0 2px 8px #0000001a}.mode-btn{padding:.5rem 1.5rem;background:transparent;border:none;border-radius:.5rem;color:var(--text-secondary);font-weight:500;cursor:pointer;transition:all .2s ease;font-size:.9rem}.mode-btn:hover{color:var(--text-primary);background:var(--hover-bg)}.mode-btn.active{background:var(--primary-color);color:#fff}.input-wrapper{width:100%;height:100%;max-width:1200px;position:relative;display:flex;flex-direction:column;justify-content:center}#content-stack{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;overflow-y:auto;padding:1rem}.textarea-container{width:100%;flex:1;position:relative;display:flex;background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;box-shadow:0 4px 24px var(--shadow-color);transition:all .3s ease;overflow:hidden}.textarea-container:focus-within{border-color:var(--primary-color);box-shadow:0 8px 32px var(--shadow-color);background:var(--hover-bg)}#main-textarea{width:100%;height:100%;background:transparent;border:none;color:var(--text-main);font-family:var(--font-family);font-size:clamp(1rem,2vw,1.25rem);line-height:1.8;resize:none;outline:none;padding:clamp(1rem,2vw,2rem);text-align:left;font-weight:300}#main-textarea::placeholder{color:var(--text-muted);opacity:.3;font-weight:300}#copy-text-btn{position:absolute;top:1rem;right:1rem;background:#ffffff0d;color:var(--text-muted);border-radius:8px;padding:8px;opacity:0;transition:all .2s ease}.textarea-container:hover #copy-text-btn{opacity:1}#copy-text-btn:hover{background:#ffffff1a;color:var(--text-main);transform:scale(1.05)}.icon-btn{background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:10px;border-radius:12px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.icon-btn:hover{color:var(--text-main);background:#ffffff1a}.icon-btn:active{transform:scale(.95);background:#ffffff1a}.icon-btn.primary{background:var(--primary-color);color:#fff;border-radius:50%;width:48px;height:48px;box-shadow:0 4px 15px var(--primary-shadow)}.icon-btn.primary:hover{background:var(--primary-hover);transform:scale(1.05) rotate(90deg);box-shadow:0 6px 20px var(--primary-color)}.subtle-code{position:absolute;left:clamp(1rem,3vw,3rem);bottom:clamp(1rem,3vw,3rem);display:flex;flex-direction:column;gap:.25rem;opacity:.6;transition:opacity .2s;z-index:10;cursor:pointer}.subtle-code:hover{opacity:1}.subtle-code.hidden{display:none}.subtle-label{font-size:.65rem;text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);font-weight:600}.subtle-code-value{font-size:1.25rem;font-weight:700;color:var(--success-color);letter-spacing:3px;font-variant-numeric:tabular-nums}.sync-status{font-size:.65rem;color:var(--success-color);opacity:.8;margin-top:.25rem;display:flex;align-items:center;gap:.25rem}.sync-status:before{content:"●";font-size:.5rem;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.expire-time{font-size:.7rem;color:var(--text-secondary);opacity:.7;margin-top:.25rem}.code-overlay{position:absolute;top:clamp(1rem,3vw,3rem);right:clamp(1rem,3vw,3rem);background:var(--card-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--card-border);border-radius:20px;padding:clamp(.8rem,2vw,1.2rem) clamp(1rem,3vw,2rem);display:flex;flex-direction:column;align-items:center;gap:.5rem;box-shadow:0 8px 32px #0003;transition:all .4s cubic-bezier(.16,1,.3,1);z-index:10}.code-overlay:hover{background:var(--hover-bg);transform:translateY(-2px);box-shadow:0 12px 40px #0000004d}.code-overlay.hidden{opacity:0;transform:translateY(-20px) scale(.95);pointer-events:none}.code-overlay .label{font-size:.75rem;text-transform:uppercase;letter-spacing:3px;color:var(--text-muted);font-weight:600}.code-overlay .code-content{display:flex;align-items:center;gap:1rem}#generated-code{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:700;color:var(--success-color);letter-spacing:4px;text-shadow:0 0 20px rgba(52,211,153,.3);font-variant-numeric:tabular-nums}.floating-widget{position:absolute;bottom:clamp(1rem,3vw,3rem);right:clamp(1rem,3vw,3rem);background:var(--card-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--card-border);border-radius:16px;padding:1rem;box-shadow:0 8px 32px #0003;transition:all .3s cubic-bezier(.16,1,.3,1);z-index:10;display:flex;flex-direction:column;gap:.5rem}.floating-widget:hover{transform:translateY(-4px);box-shadow:0 12px 40px #0000004d;background:var(--hover-bg)}.widget-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin:0}.widget-content{display:flex;align-items:center;gap:.8rem}#code-input{background:transparent;border:none;color:var(--text-main);font-family:var(--font-family);font-size:1.1rem;width:140px;padding:.5rem 1rem;text-align:center;letter-spacing:2px;font-weight:500}#code-input:focus{outline:none}#code-input::placeholder{color:var(--text-muted);opacity:.3;font-size:.9rem;letter-spacing:1px;font-weight:400}.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 768px){#app{height:100vh;height:100dvh}.main-container{padding:1rem}#main-textarea{font-size:1rem;padding:1.5rem 1rem}.list-link,.theme-toggle{top:1rem}.list-link{left:1rem}.theme-toggle{left:5.5rem}.code-overlay{top:1rem;right:1rem;left:auto;padding:.8rem 1rem}#generated-code{font-size:1.8rem}.floating-widget{bottom:1rem;right:1rem;left:1rem;border-radius:24px}.widget-content{width:100%}#code-input{flex:1;width:auto;text-align:left}}@media (max-width: 480px){.list-link{font-size:.75rem;padding:.4rem .7rem}.theme-toggle{width:2rem;height:2rem;left:4.5rem}.subtle-code{display:none}.code-overlay{padding:.6rem .8rem}.code-overlay .label{font-size:.65rem;letter-spacing:2px}#generated-code{font-size:1.5rem;letter-spacing:3px}#main-textarea{padding:1rem;line-height:1.6}#code-input{font-size:1rem;padding:.4rem .8rem}.icon-btn.primary{width:42px;height:42px}}@media (max-height: 600px) and (orientation: landscape){#app{height:100vh;height:100dvh}.main-container{padding:.5rem}#content-stack{padding:.5rem;gap:.5rem}.list-link,.theme-toggle,.code-overlay,.floating-widget{position:fixed}.textarea-container{min-height:150px}}@media (min-width: 1920px){.input-wrapper{max-width:1400px}#main-textarea{font-size:1.4rem;line-height:2}#generated-code{font-size:3rem}}