:root{--sn-ink: #10302c;--sn-muted: #4c625d;--sn-surface: #ffffff;--sn-paper: #f5f4ee;--sn-line: #dad9cc;--sn-teal: #0b6e64;--sn-teal-dark: #08524b;--sn-teal-soft: #e0f0ec;--sn-night: #0f2f2b;--sn-night-text: #f4f1e6;--sn-night-muted: #b6c9c3;--sn-dot: #c2570c;--sn-dot-light: #f7b267;--sn-amber-soft: #fcefdc;--sn-amber-text: #7a4208;--sn-red: #a4261d;--sn-red-soft: #fbe7e4;--sn-radius: 6px;--sn-shadow: 0 8px 22px rgba(16,48,44,0.08);--sn-focus: 0 0 0 3px rgba(11,110,100,0.3);--sn-math: "Cambria Math",Cambria,"STIX Two Math",Georgia,serif;--sn-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--primary: var(--sn-teal);--primary-dark: var(--sn-teal-dark);--border: var(--sn-line);--surface: var(--sn-surface);--shadow-soft: var(--sn-shadow);--surface-muted: var(--sn-paper);--text-main: var(--sn-ink);--text-muted: var(--sn-muted);}
.sn-wrap [hidden]{display: none !important;}
.sn-m{font-family: var(--sn-math);white-space: nowrap;}
.sn-tool{background: var(--sn-surface);border: 1px solid var(--sn-line);border-top: 4px solid var(--sn-teal);border-radius: var(--sn-radius);box-shadow: var(--sn-shadow);padding: 20px;margin-bottom: 44px;color: var(--sn-ink);}
.sn-byline{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 4px 16px;font-size: 0.85rem;color: var(--sn-muted);padding-bottom: 12px;margin-bottom: 14px;border-bottom: 1px solid var(--sn-line);}
.sn-byline a{color: var(--sn-teal);}
.sn-tabs{display: flex;gap: 4px;margin-bottom: 16px;border-bottom: 2px solid var(--sn-line);}
.sn-tab{background: none;border: 0;border-bottom: 3px solid transparent;margin-bottom: -2px;padding: 10px 16px;font-weight: 700;color: var(--sn-muted);cursor: pointer;min-height: 44px;}
.sn-tab:hover{color: var(--sn-teal);}
.sn-tab.is-on{color: var(--sn-teal-dark);border-bottom-color: var(--sn-dot);}
.sn-tab:focus-visible,.sn-btn:focus-visible,.sn-chip:focus-visible,.sn-copy:focus-visible,.sn-op:focus-visible,.sn-load:focus-visible{outline: none;box-shadow: var(--sn-focus);}
.sn-entry-head{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 8px;margin-bottom: 10px;}
.sn-label{font-weight: 700;margin: 0;display: block;}
.sn-actions{display: flex;flex-wrap: wrap;gap: 8px;}
.sn-btn{background: var(--sn-surface);color: var(--sn-ink);border: 1px solid var(--sn-line);border-radius: var(--sn-radius);padding: 7px 14px;font-size: 0.9rem;font-weight: 600;cursor: pointer;min-height: 40px;}
.sn-btn:hover{border-color: var(--sn-teal);color: var(--sn-teal);}
.sn-btn-main{background: var(--sn-teal);border-color: var(--sn-teal);color: #fff;}
.sn-btn-main:hover{background: var(--sn-teal-dark);border-color: var(--sn-teal-dark);color: #fff;}
.sn-input{display: block;width: 100%;font-family: var(--sn-mono);font-size: 1.3rem;color: var(--sn-ink);background: var(--sn-paper);border: 2px solid var(--sn-line);border-radius: var(--sn-radius);padding: 12px 14px;}
.sn-input:focus{outline: none;background: var(--sn-surface);border-color: var(--sn-teal);box-shadow: var(--sn-focus);}
.sn-input::placeholder{color: #6f827d;font-size: 1rem;}
.sn-read{margin: 8px 2px 0;font-size: 0.9rem;color: var(--sn-muted);}
.sn-read strong{color: var(--sn-ink);}
.sn-opts{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 10px 20px;margin-top: 12px;}
.sn-try{display: flex;flex-wrap: wrap;align-items: center;gap: 6px;margin: 0;font-size: 0.9rem;color: var(--sn-muted);}
.sn-chip{background: var(--sn-teal-soft);color: var(--sn-teal-dark);border: 0;border-radius: var(--sn-radius);padding: 6px 10px;font-size: 0.85rem;font-weight: 600;cursor: pointer;min-height: 34px;}
.sn-chip:hover{background: #cce6df;}
.sn-sf{display: flex;align-items: center;gap: 8px;font-size: 0.9rem;font-weight: 600;margin: 0;}
.sn-select{font-size: 0.9rem;color: var(--sn-ink);background: var(--sn-surface);border: 1px solid var(--sn-line);border-radius: var(--sn-radius);padding: 7px 8px;min-height: 38px;}
.sn-select:focus{outline: none;border-color: var(--sn-teal);box-shadow: var(--sn-focus);}
.sn-msg{margin: 12px 0 0;padding: 10px 12px;background: var(--sn-red-soft);color: var(--sn-red);border-radius: var(--sn-radius);font-size: 0.92rem;}
.sn-hint{margin: 12px 0 0;padding: 10px 12px;background: var(--sn-amber-soft);color: var(--sn-amber-text);border-radius: var(--sn-radius);font-size: 0.92rem;}
.sn-empty{margin-top: 16px;padding: 16px;border: 1px dashed var(--sn-line);border-radius: var(--sn-radius);color: var(--sn-muted);font-size: 0.95rem;}
.sn-empty p{margin: 0;}
.sn-empty code{color: var(--sn-teal-dark);}
.sn-out{margin-top: 16px;}
.sn-answer{background: var(--sn-night);color: var(--sn-night-text);border-radius: var(--sn-radius);padding: 18px 20px;}
.sn-answer-label{margin: 0 0 4px;font-size: 0.75rem;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;color: var(--sn-dot-light);}
.sn-answer-value{margin: 0;font-family: var(--sn-math);font-size: clamp(1.6rem,4.6vw,2.5rem);line-height: 1.25;overflow-wrap: anywhere;}
.sn-answer-meta{margin: 6px 0 0;font-size: 0.88rem;color: var(--sn-night-muted);}
.sn-walk{margin-top: 14px;padding: 14px 16px;background: var(--sn-paper);border: 1px solid var(--sn-line);border-radius: var(--sn-radius);}
.sn-walk-head{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 8px;}
.sn-walk-title{margin: 0;font-size: 0.95rem;font-weight: 700;}
.sn-strip{display: flex;align-items: flex-end;overflow-x: auto;padding: 26px 4px 10px;font-family: var(--sn-mono);font-size: 1.45rem;line-height: 1;position: relative;}
.sn-d{flex: none;width: 0.72em;text-align: center;color: var(--sn-ink);}
.sn-d.is-pad{color: #8b9c97;}
.sn-s{flex: none;position: relative;width: 13px;height: 1em;}
.sn-s i{position: absolute;left: 50%;bottom: calc(100% + 5px);transform: translateX(-50%);font-family: var(--sn-mono);font-style: normal;font-size: 0.68rem;font-weight: 600;color: var(--sn-teal-dark);}
.sn-s.is-start::after,.sn-s.is-end::after,.sn-s.is-now::after{content: "";position: absolute;left: 50%;bottom: 0;width: 9px;height: 9px;margin-left: -4.5px;border-radius: 50%;}
.sn-s.is-start::after{border: 2px solid var(--sn-dot);background: var(--sn-paper);}
.sn-s.is-end::after{background: var(--sn-dot);}
.sn-strip.is-walking .sn-s.is-end::after{background: transparent;}
.sn-strip.is-walking .sn-s.is-now::after,.sn-s.is-now::after{background: var(--sn-dot);box-shadow: 0 0 0 3px rgba(194,87,12,0.25);border: 0;}
.sn-walk-note{margin: 0;font-size: 0.86rem;color: var(--sn-muted);}
.sn-rows{margin-top: 14px;border: 1px solid var(--sn-line);border-radius: var(--sn-radius);}
.sn-row{display: grid;grid-template-columns: 124px minmax(0,1fr) auto;align-items: center;gap: 10px;padding: 9px 12px;border-bottom: 1px solid var(--sn-line);}
.sn-row:last-child{border-bottom: 0;}
.sn-row-k{font-size: 0.85rem;font-weight: 700;color: var(--sn-muted);}
.sn-row-v{font-family: var(--sn-mono);font-size: 1rem;overflow-wrap: anywhere;min-width: 0;}
.sn-row-v small{color: var(--sn-muted);font-family: inherit;}
.sn-copy{background: none;border: 1px solid var(--sn-line);border-radius: var(--sn-radius);color: var(--sn-teal-dark);font-size: 0.8rem;font-weight: 600;padding: 5px 9px;cursor: pointer;min-height: 34px;}
.sn-copy:hover{border-color: var(--sn-teal);}
.sn-copy.is-done{background: var(--sn-teal);border-color: var(--sn-teal);color: #fff;}
.sn-work{margin-top: 14px;}
.sn-work-title{margin: 0 0 6px;font-size: 0.95rem;font-weight: 700;}
.sn-steps{margin: 0;padding-left: 22px;font-size: 0.97rem;}
.sn-steps li{margin-bottom: 5px;}
.sn-foot{display: flex;justify-content: flex-end;margin-top: 12px;}
.sn-calc-row{display: grid;grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);align-items: end;gap: 12px;}
.sn-calc-row .sn-input{font-size: 1.1rem;margin-top: 6px;}
.sn-ops{display: grid;grid-template-columns: repeat(2,44px);gap: 4px;}
.sn-op{background: var(--sn-paper);color: var(--sn-ink);border: 1px solid var(--sn-line);border-radius: var(--sn-radius);font-size: 1.15rem;font-weight: 700;height: 44px;cursor: pointer;}
.sn-op:hover{border-color: var(--sn-teal);}
.sn-op.is-on{background: var(--sn-teal);border-color: var(--sn-teal);color: #fff;}
.sn-prose{margin: 0 auto 36px;color: var(--sn-ink);line-height: 1.7;}
.sn-prose section{margin-bottom: 40px;}
.sn-prose h2{font-size: 1.5rem;margin-bottom: 12px;}
.sn-prose h3{font-size: 1.08rem;margin: 0 0 8px;}
.sn-prose a{color: var(--sn-teal);}
.sn-prose code{font-family: var(--sn-mono);font-size: 0.92em;color: var(--sn-teal-dark);background: var(--sn-teal-soft);padding: 1px 5px;border-radius: 3px;white-space: nowrap;}
.sn-lead{font-size: 1.1rem;padding-left: 14px;border-left: 4px solid var(--sn-dot);}
.sn-pair{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 16px;margin: 18px 0;}
.sn-case{background: var(--sn-paper);border: 1px solid var(--sn-line);border-radius: var(--sn-radius);padding: 16px;}
.sn-case p{margin: 0 0 8px;font-size: 0.95rem;}
.sn-case ol{margin: 0;padding-left: 20px;font-size: 0.95rem;}
.sn-case li{margin-bottom: 4px;}
.sn-scroll{overflow-x: auto;margin: 12px 0;}
.sn-table{width: 100%;min-width: 520px;border-collapse: collapse;font-size: 0.95rem;}
.sn-table th{text-align: left;padding: 8px 10px;border-bottom: 2px solid var(--sn-teal);font-size: 0.85rem;color: var(--sn-muted);}
.sn-table td{padding: 8px 10px;border-bottom: 1px solid var(--sn-line);vertical-align: top;}
.sn-table tbody tr:nth-child(even){background: var(--sn-paper);}
.sn-table .sn-m{white-space: normal;}
.sn-load{background: none;border: 1px solid var(--sn-teal);border-radius: var(--sn-radius);color: var(--sn-teal-dark);font-size: 0.8rem;font-weight: 600;padding: 4px 10px;cursor: pointer;min-height: 32px;}
.sn-load:hover{background: var(--sn-teal-soft);}
.sn-aside{background: var(--sn-amber-soft);color: #4d2c07;border-radius: var(--sn-radius);padding: 14px 16px;margin: 14px 0;}
.sn-aside p{margin: 0;}
.sn-screens{list-style: none;padding: 0;margin: 14px 0;}
.sn-screens li{padding: 10px 0;border-bottom: 1px solid var(--sn-line);}
.sn-screens li:last-child{border-bottom: 0;}
.sn-zeros{display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 10px;margin: 14px 0;}
.sn-zero{border: 1px solid var(--sn-line);border-top: 3px solid var(--sn-teal);border-radius: var(--sn-radius);padding: 10px 12px;font-size: 0.92rem;}
.sn-zero b{display: block;font-family: var(--sn-math);font-size: 1.2rem;font-weight: 400;}
.sn-limits{background: var(--sn-night);color: var(--sn-night-text);border-radius: var(--sn-radius);padding: 22px;}
.sn-limits h2{color: var(--sn-night-text);}
.sn-limits ul{margin: 0;padding-left: 20px;}
.sn-limits li{margin-bottom: 8px;}
.sn-limits a{color: var(--sn-dot-light);}
.sn-limits code{background: rgba(255,255,255,0.12);color: var(--sn-night-text);}
@media (max-width: 767px){.sn-tool{padding: 14px;}.sn-pair{grid-template-columns: minmax(0,1fr);}.sn-zeros{grid-template-columns: minmax(0,1fr);}.sn-row{grid-template-columns: minmax(0,1fr) auto;}.sn-row-k{grid-column: 1 / -1;}.sn-calc-row{grid-template-columns: minmax(0,1fr);}.sn-ops{grid-template-columns: repeat(4,44px);}.sn-prose code{white-space: normal;}.sn-m{white-space: normal;}}
@media (prefers-reduced-motion: reduce){.sn-tool *{scroll-behavior: auto;}}