:root{font-family:Noto Sans KR,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color-scheme:dark;--color-bg: #0f0f14;--color-panel: #17171f;--color-border: #2b2b34;--color-accent: #7c5cff;--color-accent-strong: #ffa938;--cell-size: 72px;--grid-gap: 4px;--arrow-single: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%2388fbc9' fill-opacity='0.5' d='M8 24h26V10l28 22-28 22V40H8z'/%3E%3C/svg%3E");--arrow-double: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%2388fbc9' fill-opacity='0.5' d='M0 24h20V8l20 24-20 24V40H0zM28 24h20V8l20 24-20 24V40H28z'/%3E%3C/svg%3E");--reflect-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='4' y='26' width='56' height='12' rx='6' fill='%2388fbc9' fill-opacity='0.45'/%3E%3C/svg%3E");--reflect-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='4' y='26' width='56' height='12' rx='6' fill='%2388fbc9' fill-opacity='0.45'/%3E%3Crect x='26' y='4' width='12' height='56' rx='6' fill='%2388fbc9' fill-opacity='0.45'/%3E%3C/svg%3E")}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--color-bg);color:#f4f4f4}#app,.app-shell{min-height:100vh}.app-shell{display:flex;flex-direction:column}.toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:12px 20px;background:#15151d;border-bottom:1px solid var(--color-border)}.toolbar-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.toolbar-actions{display:flex;gap:8px;flex-wrap:wrap}.toolbar-links{display:flex;gap:12px;flex-wrap:wrap}.toolbar-links a{color:#bebed0;font-size:.85rem;align-self:baseline;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;transition:color .15s ease,border-color .15s ease}.toolbar-links a:hover{color:#fff;border-color:var(--color-accent)}.toolbar-right{display:flex;align-items:center;gap:12px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;min-width:0}.metrics{font-size:.95rem;color:#d7d7ef;white-space:nowrap}.status{font-size:.95rem;color:#bebed0;min-height:1.25rem;min-width:160px;text-align:right}.action{border:1px solid var(--color-border);background:#1f1f29;color:#f5f5ff;padding:6px 14px;border-radius:6px;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:border-color .15s ease,background .15s ease}.action.secondary{background:transparent}.action:hover{border-color:var(--color-accent)}.grid-wrapper{flex:1;overflow:auto;padding:16px}.grid{--grid-cols: 12;display:grid;gap:var(--grid-gap);grid-template-columns:repeat(var(--grid-cols),var(--cell-size));align-content:start}.cell{position:relative;width:var(--cell-size);height:var(--cell-size);border-radius:10px;border:1px solid var(--color-border);background:var(--color-panel);display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;cursor:default;overflow:hidden}.cell:before{content:"";position:absolute;inset:4px;background-repeat:no-repeat;background-position:center;background-size:92% 92%;opacity:0;transform-origin:center;transition:opacity .1s ease;pointer-events:none}.cell[data-vowel]:before{opacity:.45}.cell[data-vowel=arrow-right-slow]:before{background-image:var(--arrow-single);transform:rotate(0)}.cell[data-vowel=arrow-left-slow]:before{background-image:var(--arrow-single);transform:rotate(180deg)}.cell[data-vowel=arrow-up-slow]:before{background-image:var(--arrow-single);transform:rotate(-90deg)}.cell[data-vowel=arrow-down-slow]:before{background-image:var(--arrow-single);transform:rotate(90deg)}.cell[data-vowel=arrow-right-fast]:before{background-image:var(--arrow-double);transform:rotate(0)}.cell[data-vowel=arrow-left-fast]:before{background-image:var(--arrow-double);transform:rotate(180deg)}.cell[data-vowel=arrow-up-fast]:before{background-image:var(--arrow-double);transform:rotate(-90deg)}.cell[data-vowel=arrow-down-fast]:before{background-image:var(--arrow-double);transform:rotate(90deg)}.cell[data-vowel=reflect-horizontal]:before{background-image:var(--reflect-line);transform:rotate(0)}.cell[data-vowel=reflect-vertical]:before{background-image:var(--reflect-line);transform:rotate(90deg)}.cell[data-vowel=reflect-cross]:before{background-image:var(--reflect-cross)}.cell .opcode{position:relative;font-weight:600;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:#f7f7ff;z-index:1}.cell.selected{border-color:var(--color-accent);box-shadow:0 0 0 1px #7c5cff73}.cell.selected-primary{border-color:var(--color-accent-strong);box-shadow:0 0 0 1px #ffa9388c}.cell.editing .opcode{visibility:hidden}.cell-editor{position:absolute;inset:8px;border-radius:6px;border:1px solid var(--color-accent);background:#12121a;color:#fff;font-size:.9rem;text-transform:uppercase;text-align:center}.cell-editor:focus{outline:none;border-color:var(--color-accent-strong)}.modal{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;padding:24px;z-index:10}.modal.hidden{display:none}.modal-panel{width:min(600px,90vw);background:#14141c;border:1px solid var(--color-border);border-radius:12px;display:flex;flex-direction:column;padding:16px;gap:12px}.help-panel{max-height:80vh;overflow-y:auto}.help-content{display:flex;flex-direction:column;gap:16px;line-height:1.45}.help-content h3{margin:0 0 .4rem;font-size:1rem}.help-content ul{margin:0;padding-left:1.2rem}.help-content ul ul{margin-top:.2rem;padding-left:1.1rem}.help-content li+li{margin-top:.25rem}.help-note{margin:.4rem 0 0;color:#b0b0c8;font-size:.85rem}.modal-head h2{margin:0;font-size:1.1rem}#raw-text{min-height:260px;width:100%;border-radius:8px;border:1px solid var(--color-border);background:#0d0d13;color:#fdfdff;font-family:Noto Sans KR,monospace;padding:10px;resize:vertical}#raw-text:focus{outline:none;border-color:var(--color-accent)}.modal-actions{display:flex;justify-content:flex-end;gap:8px}@media(max-width:960px){:root{--cell-size: 56px}.toolbar{flex-direction:column;gap:8px;align-items:flex-start}}