:root{--ud-ink: #1f2233;--ud-muted: #5d6275;--ud-surface: #ffffff;--ud-paper: #fbf7f1;--ud-line: #e6dfd3;--ud-coral: #c2410c;--ud-coral-dark: #9a3412;--ud-coral-soft: #fdeee4;--ud-slate: #2f5d8a;--ud-slate-soft: #e8f0f8;--ud-radius: 12px;--ud-shadow: 0 12px 30px rgba(31,34,51,0.07);--ud-focus: 0 0 0 3px rgba(194,65,12,0.28);--ud-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--primary: var(--ud-coral);--primary-dark: var(--ud-coral-dark);--border: var(--ud-line);--surface: var(--ud-surface);--shadow-soft: var(--ud-shadow);--surface-muted: var(--ud-paper);--text-main: var(--ud-ink);--text-muted: var(--ud-muted);}
.ud-wrap [hidden]{display: none !important;}
.ud-tool{background: var(--ud-surface);border: 1px solid var(--ud-line);border-radius: var(--ud-radius);box-shadow: var(--ud-shadow);padding: 20px;margin-bottom: 44px;color: var(--ud-ink);}
.ud-byline{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 4px 16px;font-size: 0.85rem;color: var(--ud-muted);padding-bottom: 12px;margin-bottom: 18px;border-bottom: 1px dashed var(--ud-line);}
.ud-byline a{color: var(--ud-coral);}
.ud-modes{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 10px;border: 0;padding: 0;margin: 0 0 20px;min-width: 0;}
.ud-legend{font-weight: 700;font-size: 0.95rem;margin-bottom: 8px;float: none;width: auto;}
.ud-mode{position: relative;display: flex;flex-direction: column;gap: 4px;padding: 12px 14px;border: 1px solid var(--ud-line);border-radius: 10px;background: var(--ud-paper);cursor: pointer;transition: border-color 0.15s ease,background 0.15s ease;}
.ud-mode input{position: absolute;opacity: 0;pointer-events: none;}
.ud-mode:hover{border-color: #d4c7b4;}
.ud-mode:has(input:checked){border-color: var(--ud-coral);background: var(--ud-coral-soft);box-shadow: inset 0 0 0 1px var(--ud-coral);}
.ud-mode:has(input:focus-visible){box-shadow: var(--ud-focus);}
.ud-mode-name{font-weight: 700;}
.ud-mode-demo{font-family: var(--ud-mono);font-size: 0.95rem;color: var(--ud-coral-dark);}
.ud-mode-hint{font-size: 0.82rem;color: var(--ud-muted);line-height: 1.4;}
.ud-grid{display: grid;grid-template-columns: minmax(0,1fr);gap: 20px;}
.ud-labelrow{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;gap: 6px;margin-bottom: 6px;min-height: 34px;}
.ud-label{font-weight: 700;}
.ud-count{font-size: 0.85rem;color: var(--ud-muted);font-variant-numeric: tabular-nums;}
.ud-text{width: 100%;min-height: 200px;resize: vertical;padding: 12px 14px;border: 1px solid var(--ud-line);border-radius: 10px;background: var(--ud-surface);color: var(--ud-ink);font-size: 1.05rem;line-height: 1.55;}
.ud-text:focus{outline: none;border-color: var(--ud-coral);box-shadow: var(--ud-focus);}
.ud-actions{display: flex;flex-wrap: wrap;align-items: center;gap: 8px;margin-top: 10px;}
.ud-btn{appearance: none;border: 1px solid var(--ud-coral);background: var(--ud-coral);color: #fff;font-weight: 600;font-size: 0.92rem;padding: 8px 16px;border-radius: 8px;cursor: pointer;transition: background 0.15s ease;}
.ud-btn:hover:not(:disabled){background: var(--ud-coral-dark);border-color: var(--ud-coral-dark);}
.ud-btn:focus-visible{outline: none;box-shadow: var(--ud-focus);}
.ud-btn:disabled{opacity: 0.45;cursor: not-allowed;}
.ud-btn-ghost{background: transparent;color: var(--ud-coral-dark);}
.ud-btn-ghost:hover:not(:disabled){background: var(--ud-coral-soft);color: var(--ud-coral-dark);}
.ud-status{font-size: 0.88rem;color: var(--ud-slate);font-weight: 600;}
.ud-private{margin: 10px 0 0;font-size: 0.82rem;color: var(--ud-muted);}
.ud-turn{appearance: none;display: inline-flex;align-items: center;gap: 6px;border: 1px solid var(--ud-line);background: var(--ud-surface);color: var(--ud-slate);font-size: 0.85rem;font-weight: 600;padding: 5px 12px;border-radius: 999px;cursor: pointer;}
.ud-turn:hover{background: var(--ud-slate-soft);}
.ud-turn:focus-visible{outline: none;box-shadow: var(--ud-focus);}
.ud-turn[aria-pressed="true"]{background: var(--ud-slate);border-color: var(--ud-slate);color: #fff;}
.ud-turn-icon{display: inline-block;transition: transform 0.3s ease;}
.ud-turn[aria-pressed="true"] .ud-turn-icon{transform: rotate(180deg);}
.ud-stage{min-height: 200px;max-height: 340px;overflow: auto;padding: 14px 16px;border: 1px solid var(--ud-line);border-radius: 10px;background: var(--ud-paper);}
.ud-empty{margin: 0;color: var(--ud-muted);font-size: 0.95rem;}
.ud-output{font-size: 1.25rem;line-height: 1.6;white-space: pre-wrap;overflow-wrap: anywhere;color: var(--ud-ink);transition: transform 0.4s ease;}
.ud-stage.is-turned .ud-output{transform: rotate(180deg);}
.ud-stats{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 8px;margin: 14px 0 0;}
.ud-stat{border: 1px solid var(--ud-line);border-radius: 8px;padding: 8px 12px;background: var(--ud-surface);}
.ud-stat dt{font-size: 0.78rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.04em;color: var(--ud-muted);}
.ud-stat dd{margin: 2px 0 0;font-size: 1.1rem;font-weight: 700;font-variant-numeric: tabular-nums;}
.ud-stat.is-over{border-color: #e7a487;background: var(--ud-coral-soft);}
.ud-stat.is-over dd{color: var(--ud-coral-dark);}
.ud-stat-wide{grid-column: 1 / -1;}
.ud-stat-wide dd{font-size: 1rem;font-weight: 500;word-break: break-word;}
.ud-guide{margin: 0 auto 40px;color: var(--ud-ink);line-height: 1.7;}
.ud-guide h2{font-size: 1.5rem;font-weight: 700;margin: 2.2rem 0 0.8rem;}
.ud-guide h3{font-size: 1.15rem;font-weight: 700;margin: 1.8rem 0 0.6rem;}
.ud-guide code{font-family: var(--ud-mono);font-size: 0.95em;background: var(--ud-paper);border: 1px solid var(--ud-line);border-radius: 4px;padding: 0 5px;color: var(--ud-coral-dark);}
.ud-steps{display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 10px;margin: 1.2rem 0;}
.ud-step{display: flex;flex-direction: column;gap: 4px;padding: 12px 14px;border: 1px solid var(--ud-line);border-radius: 10px;background: var(--ud-paper);}
.ud-step-final{border-color: var(--ud-coral);background: var(--ud-coral-soft);}
.ud-step-tag{font-size: 0.75rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.05em;color: var(--ud-muted);}
.ud-step-text{font-family: var(--ud-mono);font-size: 1.3rem;}
.ud-chart{margin: 1rem 0 0.6rem;}
.ud-chart-head{margin: 1rem 0 0.4rem;font-size: 0.85rem;font-weight: 700;color: var(--ud-muted);text-transform: uppercase;letter-spacing: 0.04em;}
.ud-chart-row{display: grid;grid-template-columns: repeat(auto-fill,minmax(74px,1fr));gap: 6px;}
.ud-tile{appearance: none;display: flex;flex-direction: column;align-items: center;gap: 2px;padding: 8px 4px;border: 1px solid var(--ud-line);border-radius: 8px;background: var(--ud-surface);color: var(--ud-ink);cursor: pointer;transition: border-color 0.15s ease,background 0.15s ease;}
.ud-tile:hover{border-color: var(--ud-coral);}
.ud-tile:focus-visible{outline: none;box-shadow: var(--ud-focus);}
.ud-tile.is-copied{background: var(--ud-slate-soft);border-color: var(--ud-slate);}
.ud-tile-from{font-size: 0.78rem;color: var(--ud-muted);}
.ud-tile-to{font-size: 1.45rem;line-height: 1.2;}
.ud-tile-code{font-family: var(--ud-mono);font-size: 0.7rem;color: var(--ud-muted);}
.ud-chart-note{font-size: 0.92rem;color: var(--ud-muted);}
.ud-limits{padding-left: 1.2rem;}
.ud-limits li{margin-bottom: 0.7rem;}
.ud-table-wrap{overflow-x: auto;margin: 1rem 0;border: 1px solid var(--ud-line);border-radius: 10px;}
.ud-table{width: 100%;border-collapse: collapse;font-size: 0.93rem;}
.ud-table th,.ud-table td{padding: 10px 12px;text-align: left;vertical-align: top;border-bottom: 1px solid var(--ud-line);}
.ud-table thead th{background: var(--ud-paper);font-size: 0.8rem;text-transform: uppercase;letter-spacing: 0.04em;color: var(--ud-muted);}
.ud-table tbody tr:last-child th,.ud-table tbody tr:last-child td{border-bottom: 0;}
.ud-closing{display: grid;grid-template-columns: minmax(0, 1fr);gap: 1.25rem;align-items: start;margin-top: 1rem;}
.ud-closing > section{margin: 0;min-width: 0;}
@media (min-width: 768px){.ud-modes{grid-template-columns: repeat(4,minmax(0,1fr));}}
@media (min-width: 992px){.ud-grid{grid-template-columns: minmax(0,1fr) minmax(0,1fr);}.ud-closing{grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);}}
@media (max-width: 575px){.ud-tool{padding: 14px;}.ud-steps{grid-template-columns: minmax(0,1fr);}.ud-stats{grid-template-columns: minmax(0,1fr);}}
@media (prefers-reduced-motion: reduce){.ud-output,.ud-turn-icon{transition: none;}}