.cipher-page{margin-top:1.5rem;margin-bottom:3rem}.preset-bar{background:linear-gradient(135deg, var(--color-canvas-soft) 0%, var(--color-canvas) 100%);border:1px solid var(--color-hairline);border-radius:var(--radius-lg);align-items:center;gap:.75rem;margin-bottom:1.25rem;padding:.7rem 1rem;display:flex}.preset-label{color:var(--color-accent);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;border-right:1px solid var(--color-hairline);align-items:center;gap:.35rem;padding-right:.6rem;font-size:.72rem;font-weight:700;display:flex}.preset-buttons{flex-wrap:wrap;gap:.5rem;display:flex}.preset-btn{border-radius:var(--radius-md);background:linear-gradient(var(--color-card), var(--color-card)) padding-box, linear-gradient(135deg, var(--color-hairline-strong) 0%, var(--color-hairline) 100%) border-box;color:var(--color-body);cursor:pointer;white-space:nowrap;border:1px solid #0000;align-items:center;gap:.55rem;padding:.4rem .8rem .4rem .55rem;font-size:.72rem;font-weight:650;line-height:1.2;transition:all .25s cubic-bezier(.16,1,.3,1);display:flex;position:relative;box-shadow:0 1px 2px #0000000a}.preset-icon{border-radius:var(--radius-sm);background:var(--color-canvas-soft);border:1px solid var(--color-hairline);width:26px;height:26px;color:var(--color-accent);flex-shrink:0;justify-content:center;align-items:center;font-size:.85rem;transition:all .25s cubic-bezier(.16,1,.3,1);display:flex}.preset-text{flex-direction:column;gap:.05rem;display:flex}.preset-name{font-size:.72rem;font-weight:650}.preset-sub{color:var(--color-mute);letter-spacing:.01em;font-size:.6rem;font-weight:400}.preset-btn:hover{background:linear-gradient(var(--color-accent-soft), var(--color-accent-soft)) padding-box, linear-gradient(135deg, var(--color-accent) 0%, color-mix(in srgb, var(--color-accent) 70%, var(--color-ink)) 100%) border-box;color:var(--color-accent);transform:translateY(-2px);box-shadow:0 6px 16px #0000001a}.preset-btn:hover .preset-icon{background:var(--color-accent);color:#fff;border-color:var(--color-accent);transform:rotate(-15deg)}.preset-btn:hover .preset-sub{color:var(--color-accent);opacity:.7}.preset-btn:active{transform:translateY(0);box-shadow:0 1px 4px #00000014}.preset-btn.active{background:linear-gradient(135deg, var(--color-accent) 0%, color-mix(in srgb, var(--color-accent) 80%, var(--color-ink)) 100%) padding-box, linear-gradient(135deg, var(--color-accent) 0%, color-mix(in srgb, var(--color-accent) 70%, var(--color-ink)) 100%) border-box;color:#fff;box-shadow:0 2px 8px color-mix(in srgb, var(--color-accent) 30%, transparent);transform:translateY(-1px)}.preset-btn.active .preset-icon{color:#fff;background:#fff3;border-color:#ffffff4d}.preset-btn.active .preset-sub{color:#ffffffb3}.preset-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.cipher-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:1.25rem;display:grid}.panel{flex-direction:column;display:flex}.panel-header{border-bottom:1px solid var(--color-hairline);justify-content:space-between;align-items:center;padding:.875rem 1.25rem;display:flex}.panel-header h2{color:var(--color-ink);font-size:.875rem;font-weight:600}.form-content,.result-content{flex-direction:column;gap:1rem;padding:1.25rem;display:flex}.control-grid{grid-template-columns:1fr 1fr;gap:.875rem;display:grid}.form-field{flex-direction:column;gap:.375rem;display:flex}.form-field span{color:var(--color-mute);font-size:.75rem;font-weight:600}.alphabet-strip{border-radius:var(--radius-md);background:linear-gradient(135deg, var(--color-card), var(--color-canvas-soft));border:1px solid var(--color-hairline);font-family:var(--font-mono);padding:.6rem .75rem;font-size:.8rem;overflow-x:auto}.strip-row{align-items:center;gap:.5rem;line-height:1.6;display:flex}.strip-label{color:var(--color-mute);text-transform:uppercase;letter-spacing:.05em;min-width:3rem;font-size:.65rem;font-weight:700}.strip-chars{letter-spacing:.18em;font-weight:600}.action-row{flex-wrap:wrap;gap:.5rem;display:flex}.btn-copy-action{border-radius:var(--radius-md);border:1px solid var(--color-hairline);background:var(--color-card);color:var(--color-body);cursor:pointer;align-items:center;gap:.35rem;padding:.45rem .9rem;font-size:.8rem;font-weight:500;transition:all .15s;display:inline-flex}.btn-copy-action:hover{border-color:var(--color-accent);color:var(--color-accent)}.output-box{white-space:pre-wrap;word-break:break-word;background:var(--color-canvas-soft);border:1px solid var(--color-hairline);border-radius:var(--radius-md);min-height:200px;color:var(--color-ink);margin:0;padding:1rem;font-size:.875rem;line-height:1.6}.explain-box{border-radius:var(--radius-md);background:var(--color-accent-soft);color:var(--color-body);padding:.875rem 1rem;font-size:.875rem;line-height:1.5}.brute-force-section h3,.freq-section h3{color:var(--color-ink);letter-spacing:-.01em;margin:0;font-size:.9rem;font-weight:650}.muted{color:var(--color-mute);font-size:.75rem;font-weight:400}.bf-section-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.6rem;display:flex}.bf-stats{align-items:center;gap:.5rem;display:flex}.bf-stat-badge{text-transform:uppercase;letter-spacing:.06em;background:color-mix(in srgb, var(--color-accent) 10%, var(--color-card));color:var(--color-accent);border:1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);border-radius:999px;padding:.2rem .55rem;font-size:.6rem;font-weight:700}.brute-force-scroll{border:1px solid var(--color-hairline);background:var(--color-card);scroll-behavior:smooth;border-radius:12px;max-height:520px;overflow-y:auto;box-shadow:0 1px 3px #0000000a}.brute-force-scroll::-webkit-scrollbar{width:5px}.brute-force-scroll::-webkit-scrollbar-track{background:0 0}.brute-force-scroll::-webkit-scrollbar-thumb{background:var(--color-hairline-strong);border-radius:3px}.bf-grid-header{border-bottom:1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-hairline));background:var(--color-canvas);z-index:2;grid-template-columns:3.8rem 3.6rem 6.5rem 1fr;gap:0;padding:.55rem 1rem;display:grid;position:sticky;top:0}.bf-grid-header span{text-transform:uppercase;letter-spacing:.07em;color:var(--color-mute);font-size:.62rem;font-weight:650}.bf-grid-row{cursor:pointer;border-left:3px solid #0000;border-bottom:1px solid color-mix(in srgb, var(--color-hairline) 50%, transparent);grid-template-columns:3.8rem 3.6rem 6.5rem 1fr;gap:0;padding:.55rem 1rem;transition:all .15s;display:grid}.bf-grid-row:last-child{border-bottom:none}.bf-grid-row:hover{background:color-mix(in srgb, var(--color-accent) 5%, var(--color-card));border-left-color:var(--color-accent)}.bf-grid-row.active{background:color-mix(in srgb, var(--color-accent) 7%, var(--color-card));border-left-color:var(--color-accent)}.bf-grid-row.best{background:color-mix(in srgb, var(--color-success) 6%, var(--color-card));border-left-color:var(--color-success);border-left-width:4px}.bf-grid-row.best:hover{background:color-mix(in srgb, var(--color-success) 9%, var(--color-card))}.bf-grid-row.active.best{background:linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 7%, var(--color-card)), color-mix(in srgb, var(--color-success) 6%, var(--color-card)))}.bf-grid-row .bf-g-shift{font-family:var(--font-mono);color:var(--color-mute);align-items:center;font-size:.88rem;font-weight:700;display:flex}.bf-grid-row.best .bf-g-shift{color:var(--color-success)}.bf-grid-row.active .bf-g-shift{color:var(--color-accent)}.bf-grid-row .bf-g-rank{font-family:var(--font-mono);color:var(--color-mute);align-items:center;font-size:.85rem;font-weight:600;display:flex}.bf-grid-row.best .bf-g-rank{color:var(--color-success);font-weight:700}.bf-grid-row.best .bf-g-rank.silver{color:#64748b}.bf-grid-row.best .bf-g-rank.bronze{color:#92400e}.bf-grid-row .bf-g-conf{flex-direction:column;justify-content:center;gap:.3rem;display:flex}.bf-g-conf-num{font-family:var(--font-mono);color:var(--color-mute);font-size:.82rem;font-weight:600}.bf-grid-row.best .bf-g-conf-num{color:var(--color-success);font-weight:700}.bf-grid-row.active .bf-g-conf-num{color:var(--color-accent);font-weight:700}.bf-g-bar{background:color-mix(in srgb, var(--color-hairline) 50%, var(--color-card));border-radius:4px;height:4px;overflow:hidden}.bf-g-bar-fill{border-radius:4px;height:100%;transition:width .5s cubic-bezier(.16,1,.3,1)}.bf-grid-row.best .bf-g-bar-fill{background:var(--color-success)}.bf-grid-row.active .bf-g-bar-fill{background:var(--color-accent)}.bf-grid-row .bf-g-text{font-family:var(--font-mono);color:var(--color-ink);white-space:nowrap;text-overflow:ellipsis;align-items:center;font-size:.88rem;line-height:1.5;display:flex;overflow:hidden}.bf-grid-row.best .bf-g-text{color:var(--color-success-text,var(--color-ink));font-weight:500}.share-panel-card{border-radius:var(--radius-md);background:var(--color-canvas-soft);border:1px solid var(--color-hairline);padding:1rem 1.25rem}.share-header h3{color:var(--color-ink);margin:0 0 .2rem;font-size:.9rem;font-weight:650}.share-header p{color:var(--color-mute);margin:0 0 .85rem;font-size:.78rem;line-height:1.4}.share-actions-row{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.social-links-container{flex-wrap:wrap;gap:.5rem;display:flex}.share-native-btn{border-radius:var(--radius-md);cursor:pointer;color:#fff;background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#a855f7 100%);border:none;align-items:center;gap:.4rem;height:38px;padding:0 1rem;font-size:.8rem;font-weight:650;transition:all .2s;display:inline-flex;box-shadow:0 2px 12px #6366f14d}.share-native-btn:hover{transform:translateY(-1px);box-shadow:0 4px 20px #6366f173}.share-native-btn:active{transform:translateY(0)}.social-share-btn{border-radius:var(--radius-md);color:#fff;justify-content:center;align-items:center;height:34px;padding:0 .85rem;font-size:.75rem;font-weight:600;text-decoration:none;transition:opacity .2s,transform .15s;display:flex}.social-share-btn:hover{opacity:.9;transform:translateY(-1px)}.social-share-btn.tw{background:#0f1419}.social-share-btn.li{background:#0a66c2}.social-share-btn.wa{background:#25d366}.social-share-btn.rd{background:#ff4500}.freq-chart{background:var(--color-card);border:1px solid var(--color-hairline);border-radius:var(--radius-md);align-items:flex-end;gap:3px;height:140px;padding:.5rem .5rem 0;display:flex}.freq-col{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:2px;height:100%;display:flex}.freq-bar{background:linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 60%, var(--color-ink)));border-radius:3px 3px 0 0;width:100%;min-height:2px;transition:height .3s}.freq-bar-en{background:var(--color-hairline-strong);opacity:.3;border-radius:3px 3px 0 0;width:100%;min-height:2px}.freq-col span{display:none}.ic-info{border-radius:var(--radius-md);background:linear-gradient(135deg, var(--color-card), color-mix(in srgb, var(--color-card) 90%, var(--color-accent)));border:1px solid var(--color-hairline);color:var(--color-body);flex-wrap:wrap;align-items:center;gap:.75rem;padding:.65rem .85rem;font-size:.78rem;display:flex}.ic-info span{white-space:nowrap}.ic-info strong{color:var(--color-accent);font-family:var(--font-mono)}.ic-hint{color:var(--color-mute);flex-basis:100%;font-size:.72rem;font-style:italic}.grid-section h3{color:var(--color-ink);margin:0 0 .5rem;font-size:.85rem;font-weight:600}.grid-wrapper{border:1px solid var(--color-hairline);border-radius:var(--radius-md);background:var(--color-card);max-height:320px;overflow:auto}.vigenere-grid{border-collapse:separate;border-spacing:0;font-size:.65rem;font-family:var(--font-mono);width:100%}.vigenere-grid th{background:linear-gradient(135deg, var(--color-canvas-soft), color-mix(in srgb, var(--color-canvas-soft) 80%, var(--color-accent)));color:var(--color-mute);border-bottom:2px solid var(--color-accent);border-right:1px solid var(--color-hairline);z-index:1;text-transform:uppercase;letter-spacing:.05em;padding:.35rem .4rem;font-size:.6rem;font-weight:700;position:sticky;top:0}.vigenere-grid th:first-child{z-index:2;background:linear-gradient(135deg, var(--color-canvas-soft), color-mix(in srgb, var(--color-canvas-soft) 80%, var(--color-accent)));border-right:2px solid var(--color-accent);left:0}.vigenere-grid td{text-align:center;border-bottom:1px solid var(--color-hairline);border-right:1px solid var(--color-hairline);color:var(--color-body);padding:.3rem .4rem;font-weight:500;transition:all .2s cubic-bezier(.16,1,.3,1)}.vigenere-grid td:nth-child(2){border-left:2px solid var(--color-accent)}.vigenere-grid tr:nth-child(2) td{border-top:2px solid var(--color-accent)}.vigenere-grid td.highlight{background:linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 70%, var(--color-ink)));color:#fff;z-index:1;box-shadow:0 0 12px color-mix(in srgb, var(--color-accent) 60%, transparent);border-radius:var(--radius-sm);font-weight:700;position:relative;transform:scale(1.2)}.grid-trace{flex-wrap:wrap;gap:.35rem;padding:.6rem 0 0;display:flex}.trace-step{font-size:.7rem;font-family:var(--font-mono);border-radius:var(--radius-sm);background:linear-gradient(135deg, var(--color-card), var(--color-canvas-soft));border:1px solid var(--color-hairline);align-items:center;gap:.2rem;padding:.25rem .5rem;transition:all .2s;display:inline-flex}.trace-step:hover{border-color:var(--color-accent);transform:translateY(-1px)}.trace-key{color:var(--color-accent);font-weight:700}.trace-op,.trace-eq{color:var(--color-mute);font-size:.6rem}.trace-plain{color:var(--color-ink);font-weight:500}.trace-result{color:var(--color-success);font-weight:700}@media (width<=900px){.cipher-layout{grid-template-columns:1fr}}@media (width<=560px){.control-grid{grid-template-columns:1fr}}