:root { color-scheme: light; --ink: #20353c; --muted: #66757a; --paper: #f5f5f0; --line: #dfe4e0; --blue: #2474ab; --red: #c4493d; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--paper); font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button { color: inherit; }
button:disabled { cursor: default; opacity: .38; }
button, a, input, select, textarea, svg { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #d88d18; outline-offset: 4px; }
a { color: inherit; }
.app-shell { max-width: 1440px; margin: auto; padding: 0 54px; }
.masthead { min-height: 106px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 850; font-size: 18px; letter-spacing: 1px; line-height: 1.25; }
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.website-qr-link { display: block; flex-shrink: 0; line-height: 0; border-radius: 3px; }
.website-qr { display: block; width: 44px; height: 44px; background: white; }
.brand-mark { display: grid; place-items: center; position: relative; width: 44px; height: 44px; background: var(--ink); color: white; border-radius: 12px; font-size: 30px; font-weight: 800; transform: rotate(-5deg); }
.brand-mark span { position: absolute; font-size: 20px; color: #f0c657; top: -6px; right: -5px; }
.wordmark-sub { display: block; color: var(--muted); letter-spacing: 2.5px; font-size: 9px; margin-top: 4px; font-weight: 650; }
.browser-badge { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.status-dot { width: 6px; height: 6px; background: #397859; display: inline-block; border-radius: 100%; flex-shrink: 0; }
.intro { padding: 43px 0 32px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.eyebrow { margin: 0 0 12px; font-size: 10px; font-weight: 800; letter-spacing: 1.8px; color: #65776e; }
h1 { font-size: clamp(30px, 3.05vw, 43px); letter-spacing: -1.7px; line-height: 1.16; margin: 0; font-weight: 750; }
h1 span { color: #61796b; }
.intro-copy { color: var(--muted); font-size: 14px; margin: 14px 0 0; line-height: 1.6; }
.edition-tag { flex-shrink: 0; padding: 12px 15px; border: 1px solid #d8ded6; border-radius: 5px; color: var(--muted); font-family: Consolas, monospace; font-size: 10px; line-height: 1.9; letter-spacing: 1px; transform: rotate(3deg); background: #f0f1e9; }
.edition-tag strong { color: #596c60; font-size: 11px; }
h2 { font-size: 16px; font-weight: 700; margin: 0; letter-spacing: -.35px; }
.key-bar { display: flex; align-items: center; gap: 30px; border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 19px 24px; margin-bottom: 22px; box-shadow: 0 3px 0 #20353c03; }
.key-intro, .heading-group { display: flex; align-items: center; gap: 12px; }
.section-number { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; font-size: 11px; font-family: Consolas, monospace; color: #75817c; background: #f9faf7; }
.key-intro p { margin: 5px 0 0; font-size: 12px; color: var(--muted); }
.key-selectors { display: flex; gap: 12px; margin-left: auto; }
.key-control { display: flex; align-items: center; gap: 16px; border: 1px solid; border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 650; }
.key-control.red { background: #fff6f3; border-color: #ecd8d3; color: var(--red); }
.key-control.blue { background: #f2f8fd; border-color: #d4e3ed; color: var(--blue); }
.key-control select { border: 0; color: inherit; background: transparent; font-size: 19px; font-weight: 750; min-width: 43px; padding-right: 4px; }
.key-display { display: flex; gap: 11px; align-items: center; border-left: 1px solid var(--line); padding-left: 28px; font: 700 13px Consolas, monospace; letter-spacing: 1px; white-space: nowrap; }
.red-text { color: var(--red); }.blue-text { color: var(--blue); }.key-divider { color: #b7bfb9; font-weight: 400; }
.workspace { display: grid; grid-template-columns: 1.12fr 1fr; gap: 22px; }
.panel { background: white; border: 1px solid var(--line); border-radius: 15px; padding: 25px; min-width: 0; box-shadow: 0 4px 10px #172d3503; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.small-tag { font-size: 8px; letter-spacing: 1.1px; font-weight: 750; color: #65776e; border: 1px solid #dce5dc; background: #f4f7f0; padding: 5px 7px; border-radius: 4px; white-space: nowrap; }
.panel-description { margin: 12px 0 22px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.wheel-pair { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); gap: 3px; padding: 10px 0 18px; align-items: center; }
.wheel-column { min-width: 0; --wheel-color: var(--blue); --rim: #edf5fb; --stroke: #c4dcec; --hub: #2e7bac; }
.wheel-column.red { --wheel-color: var(--red); --rim: #fff0ea; --stroke: #edcfc4; --hub: #ce5d4d; }
.wheel-label { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 8px; font-weight: 800; letter-spacing: .7px; color: var(--wheel-color); margin: 0 0 11px; white-space: nowrap; }
.color-dot { height: 5px; width: 5px; background: var(--wheel-color); border-radius: 100%; }
.wheel-role { font-size: 7px; color: #6e797b; background: #f3f4f1; border-radius: 3px; padding: 3px 4px; margin-left: 3px; letter-spacing: .5px; }
.cipher-wheel { display: block; width: 100%; overflow: visible; user-select: none; border-radius: 50%; }
.cipher-wheel.interactive { cursor: grab; touch-action: none; }
.cipher-wheel.interactive:active { cursor: grabbing; }
.wheel-outline { fill: white; stroke: #e7ebe7; stroke-width: 1; }
.wheel-rim { fill: var(--rim); stroke: var(--stroke); stroke-width: 2; }
.wheel-disc { transform-origin: 160px 160px; transition: transform .18s ease-out; }
.wheel-tick { stroke: var(--stroke); stroke-width: 1.3; }
.rim-letter { font: 700 17px 'Segoe UI', sans-serif; fill: var(--wheel-color); }
.letter-hit { fill: transparent; }
.interactive [data-letter]:hover .letter-hit { fill: var(--stroke); }
.inner-ring { fill: none; stroke: var(--stroke); stroke-dasharray: 2 5; }
.hub-lines { stroke: var(--stroke); stroke-width: 1.5; }
.wheel-pointer { fill: var(--wheel-color); }
.wheel-hub { fill: var(--hub); stroke: #ffffff80; stroke-width: 4; }
.hub-label { fill: #fff; font: 600 9px 'Segoe UI', sans-serif; letter-spacing: 2px; }
.hub-letter { fill: white; font: 650 62px 'Segoe UI', sans-serif; }
.hub-rivet { fill: #ffffff80; }
.wheel-connector { color: #9ba9a4; font-size: 23px; text-align: center; margin-top: -9px; }
.wheel-steps { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 9px; }
.wheel-steps button { border: 1px solid #dfe7e9; border-radius: 7px; background: white; font-size: 16px; min-width: 28px; height: 28px; color: var(--wheel-color); }
.wheel-steps span { font-size: 7px; letter-spacing: .6px; font-weight: 700; color: #707f82; }
.preview-strip { display: flex; align-items: center; justify-content: center; gap: 17px; border: 1px solid var(--line); border-radius: 8px; background: #fafbf8; padding: 11px 13px; }
.preview-strip > span:first-child { font-size: 9px; color: #76847e; font-weight: 800; letter-spacing: 1px; }
.preview-strip strong { font-family: Consolas, monospace; font-size: 25px; font-weight: 600; }
.preview-arrow { color: #94a49a; }
.preview-caption { font-size: 10px; color: #718179; }
.letter-controls { display: flex; align-items: flex-end; gap: 12px; margin-top: 19px; }
.letter-controls label { display: block; font-size: 11px; margin-bottom: 6px; font-weight: 650; }
#letter-input { border: 1px solid #ced8d4; border-radius: 7px; background: white; text-align: center; width: 103px; height: 40px; font-size: 19px; font-weight: 650; }
.button { height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; border-radius: 7px; padding: 0 15px; font-size: 12px; font-weight: 650; }
.button.secondary { background: #f6f8f4; border: 1px solid #d7dfd7; }
.button.secondary:hover:not(:disabled) { background: #eaf0e7; }
.letter-hint { color: #7d8986; font-size: 10px; line-height: 1.6; margin: 0 0 3px; }
.validation-message { color: #a2372c; font-size: 11px; min-height: 16px; margin: 5px 0 1px; }
.wheel-tip { border-top: 1px solid #eef0eb; padding-top: 13px; color: #7a8780; font-size: 10px; line-height: 1.6; display: flex; gap: 9px; align-items: center; }
.wheel-tip > span { font-size: 19px; color: #7a8d82; }
.mode-control { display: flex; gap: 4px; background: #f1f3ee; padding: 4px; border-radius: 8px; margin-bottom: 19px; }
.mode-button { border: 1px solid transparent; padding: 9px 10px; border-radius: 5px; width: 50%; font-size: 12px; font-weight: 650; background: transparent; color: #737f78; }
.mode-button span { margin-right: 7px; }
.mode-button.selected { background: white; border-color: #e3e6dd; color: var(--ink); box-shadow: 0 2px 3px #23332706; }
.textarea-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; margin-bottom: 8px; }
.textarea-heading label { font-weight: 650; }.textarea-heading > span { color: #8a9490; font-size: 10px; }
textarea { display: block; width: 100%; height: 115px; min-height: 95px; resize: vertical; padding: 13px 14px; border: 1px solid #d9e0d9; border-radius: 8px; background: #fff; color: var(--ink); font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 1.75; }
textarea::placeholder { font-family: 'Segoe UI', system-ui, sans-serif; font-size: 12px; color: #929b95; }
.output-area { background: #f5f7f1; border-color: #e2e7dc; color: #47634f; }
.message-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 18px; }
.text-button { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 5px 0; font-size: 11px; color: #58705e; font-weight: 600; }
.text-button:hover:not(:disabled) { text-decoration: underline; }.text-button.muted { color: #7f8983; font-weight: 400; }
.live-label { display: flex; align-items: center; gap: 5px; font-size: 8px !important; letter-spacing: .8px; }
.live-label .status-dot { width: 4px; height: 4px; }
.text-note { color: #87918b; font-size: 10px; line-height: 1.6; margin: 11px 0 0; }
.how-it-works { margin: 24px 0 31px; display: flex; gap: 17px; align-items: center; padding: 22px 26px; border: 1px solid #dedfd0; border-radius: 12px; background: #eeeee3; }
.note-icon { display: grid; place-items: center; flex-shrink: 0; font-size: 27px; color: #827b45; width: 40px; height: 40px; border: 1px solid #d4d4bc; border-radius: 10px; }
.how-it-works h2 { font-size: 13px; color: #58634f; margin-bottom: 5px; }
.how-it-works p { color: #747b68; font-size: 11px; line-height: 1.8; margin: 0; max-width: 830px; }
.connection-doodle { flex-shrink: 0; margin-left: auto; font-size: 26px; font-family: Consolas, monospace; color: #767e5d; }.connection-doodle span { margin: 0 12px; color: #a4a989; }
footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding: 22px 0 28px; color: #8b948b; font-size: 10px; }
footer > span:last-child { color: #778771; } footer > span:last-child span { margin-left: 7px; }
.loading-state { min-height: 100vh; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 15px; color: #65776e; }
.loading-spinner { width: 25px; height: 25px; border: 3px solid #d2e1e8; border-top-color: #ce5d4d; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#blazor-error-ui { display: none; position: fixed; bottom: 0; width: 100%; padding: 16px; background: #fff0dc; border-top: 1px solid #bd714b; z-index: 100; font-size: 14px; }
#blazor-error-ui .reload { margin-left: 12px; } #blazor-error-ui .dismiss { cursor: pointer; float: right; }
@media (min-width: 1440px) { .panel { padding: 29px; } .wheel-pair { padding-top: 15px; } }
@media (max-width: 1100px) { .app-shell { padding: 0 28px; } .key-bar { gap: 18px; padding: 18px; } .key-intro p { max-width: 175px; line-height: 1.5; } .key-display { padding-left: 18px; gap: 7px; font-size: 11px; } .panel { padding: 20px; } .workspace { gap: 17px; grid-template-columns: 1.07fr 1fr; } .small-tag { display: none; } .letter-hint { display: none; } .preview-caption { font-size: 9px; } }
@media (max-width: 820px) { .workspace { grid-template-columns: 1fr; } .key-bar { flex-wrap: wrap; } .key-intro { flex: 1; } .key-selectors { margin-left: 0; } .key-display { border-left: 0; border-top: 1px solid var(--line); padding: 13px 0 0; width: 100%; justify-content: center; font-size: 13px; } .key-intro p { max-width: none; } .wheel-pair { max-width: 620px; margin: auto; padding-bottom: 22px; gap: 8px; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); } .wheel-label { font-size: 10px; } .wheel-role { font-size: 8px; } .wheel-steps span { font-size: 9px; } .letter-hint { display: inline; } .small-tag { display: inline; } .preview-caption { font-size: 11px; } .letter-controls { justify-content: center; } .validation-message { text-align: center; } .wheel-tip { justify-content: center; } .edition-tag { display: none; } .how-it-works { padding: 20px; } .connection-doodle { display: none; } .browser-badge { font-size: 10px; } .intro { padding-top: 30px; } }
@media (max-width: 520px) { .app-shell { padding: 0 16px; } .masthead { min-height: 82px; } .wordmark { font-size: 14px; gap: 9px; } .wordmark-sub { font-size: 8px; } .brand-mark { width: 35px; height: 35px; font-size: 25px; } .browser-badge { max-width: 105px; line-height: 1.5; font-size: 9px; gap: 5px; } .intro { padding: 28px 0 25px; } h1 { font-size: 32px; letter-spacing: -1.4px; max-width: 310px; } h1 span { display: block; } .intro-copy { font-size: 12px; max-width: 300px; margin-top: 12px; } .eyebrow { font-size: 8px; letter-spacing: 1.2px; } .key-bar { padding: 16px; gap: 16px; margin-bottom: 16px; } .key-intro { flex-basis: 100%; } .key-selectors { width: 100%; gap: 10px; } .key-control { flex: 1; justify-content: space-between; gap: 8px; } .key-display { padding-top: 11px; } .panel { padding: 18px 14px; } h2 { font-size: 15px; } .panel-description { font-size: 11px; margin-bottom: 18px; } .heading-group { gap: 9px; } .wheel-pair { gap: 1px; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); } .wheel-label { font-size: 7px; letter-spacing: .4px; gap: 3px; } .wheel-role { font-size: 6px; margin-left: 1px; padding: 3px; } .wheel-steps { gap: 4px; } .wheel-steps span { font-size: 6px; letter-spacing: .2px; } .wheel-steps button { min-width: 28px; min-height: 34px; } .wheel-connector { font-size: 18px; } .preview-strip { gap: 12px; } .preview-caption { font-size: 9px; } .letter-controls { gap: 9px; } .letter-hint { font-size: 9px; } #letter-input { width: 85px; } .button { padding: 0 12px; gap: 12px; } .wheel-tip { font-size: 9px; gap: 6px; } .how-it-works { align-items: flex-start; padding: 17px; gap: 12px; margin-top: 17px; } .note-icon { width: 30px; height: 30px; font-size: 22px; } .how-it-works p { font-size: 10px; } footer { align-items: flex-start; font-size: 9px; gap: 15px; line-height: 1.6; } footer > span:last-child { text-align: right; } }
@media (max-width: 520px) { .wheel-pair { display: flex; flex-direction: column; max-width: 280px; gap: 16px; } .wheel-column { width: 100%; } .wheel-label { font-size: 10px; letter-spacing: .7px; gap: 5px; } .wheel-role { font-size: 8px; padding: 4px 5px; } .wheel-steps { gap: 14px; } .wheel-steps span { font-size: 9px; } .wheel-steps button { min-width: 40px; min-height: 40px; } .wheel-connector { transform: rotate(90deg); margin: 0; font-size: 25px; } }
footer > span.app-version { flex-basis: 100%; text-align: center; font-family: Consolas, 'Courier New', monospace; font-size: 11px; color: #66776b; }
@media (max-width: 520px) { .brand-lockup { gap: 9px; } .website-qr { width: 35px; height: 35px; } .masthead { flex-wrap: wrap; gap: 12px; padding: 16px 0; } .browser-badge { max-width: none; flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }