:root{--cin-paper: #f4f4f1;--cin-panel: #ffffff;--cin-line: #dcdcd6;--cin-line-2: #b8b8b0;--cin-ink: #17181c;--cin-ink-2: #41434b;--cin-dim: #666872;--cin-blue: #1557d6;--cin-blue-2: #0f43a8;--cin-blue-soft: #e6eefc;--cin-amber: #eaa829;--cin-amber-soft: #fdf3dc;--cin-amber-ink: #7a5206;--cin-rose: #b42343;--cin-rose-soft: #fcedf1;--cin-stage: #16171b;--cin-stage-2: #26282f;--cin-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--primary: #1557d6;--primary-dark: #0f43a8;--border: #dcdcd6;--surface: #ffffff;--surface-muted: #f4f4f1;--shadow-soft: 0 2px 10px rgba(23, 24, 28, 0.06);--text-main: #17181c;--text-muted: #666872;}
.cin-sr{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}
.cin-app{background: var(--cin-paper);border: 1px solid var(--cin-line);border-radius: 14px;padding: 1rem;margin-bottom: 2.4rem;color: var(--cin-ink);}
.cin-head{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 0.5rem 1rem;margin-bottom: 0.9rem;}
.cin-byline{display: flex;flex-wrap: wrap;gap: 0.2rem 0.7rem;font-size: 0.82rem;color: var(--cin-dim);}
.cin-byline-author a, .cin-byline-author .author-link{color: var(--cin-blue-2);font-weight: 600;text-decoration: none;}
.cin-byline-author a:hover, .cin-byline-author .author-link:hover{text-decoration: underline;}
.cin-facts{display: flex;flex-wrap: wrap;gap: 0.4rem;list-style: none;margin: 0;padding: 0;}
.cin-facts li{font-size: 0.78rem;color: var(--cin-ink-2);background: var(--cin-panel);border: 1px solid var(--cin-line);border-radius: 6px;padding: 0.22rem 0.6rem;}
.cin-drop{display: flex;align-items: center;justify-content: center;gap: 1.2rem;padding: 2.6rem 1.2rem;background: var(--cin-panel);border: 2px dashed var(--cin-line-2);border-radius: 12px;cursor: pointer;text-align: left;transition: border-color 0.15s, background 0.15s, padding 0.15s;}
.cin-drop:hover, .cin-drop:focus-visible, .cin-drop.is-over{border-color: var(--cin-blue);background: var(--cin-blue-soft);outline: none;}
.cin-file{display: none;}
.cin-drop-mark{flex: 0 0 auto;width: 64px;height: 64px;border-radius: 50%;border: 2px solid var(--cin-ink);background: linear-gradient(90deg, var(--cin-blue) 50%, var(--cin-amber) 50%);}
.cin-drop-text{display: flex;flex-direction: column;gap: 0.25rem;}
.cin-drop-title{font-size: 1.08rem;font-weight: 700;color: var(--cin-ink);}
.cin-drop-swap{display: none;font-size: 0.95rem;font-weight: 700;color: var(--cin-ink);}
.cin-drop-hint{font-size: 0.86rem;color: var(--cin-dim);}
.cin-drop.is-loaded{padding: 0.7rem 1rem;justify-content: flex-start;}
.cin-drop.is-loaded .cin-drop-mark{width: 30px;height: 30px;}
.cin-drop.is-loaded .cin-drop-title, .cin-drop.is-loaded .cin-drop-hint{display: none;}
.cin-drop.is-loaded .cin-drop-swap{display: block;}
.cin-alt{display: flex;flex-wrap: wrap;align-items: center;gap: 0.5rem 0.75rem;margin-top: 0.7rem;font-size: 0.85rem;color: var(--cin-dim);}
.cin-mini{font-size: 0.84rem;font-weight: 600;color: var(--cin-ink);background: var(--cin-panel);border: 1px solid var(--cin-line-2);border-radius: 7px;padding: 0.36rem 0.75rem;cursor: pointer;}
.cin-mini:hover{border-color: var(--cin-blue);color: var(--cin-blue-2);}
.cin-note{display: none;margin-top: 0.7rem;padding: 0.55rem 0.75rem;border-radius: 8px;font-size: 0.87rem;}
.cin-note.is-info{display: block;background: var(--cin-amber-soft);color: var(--cin-amber-ink);}
.cin-note.is-err{display: block;background: var(--cin-rose-soft);color: var(--cin-rose);}
.cin-bench{display: grid;grid-template-columns: minmax(0, 1fr);gap: 1rem;margin-top: 1rem;}
.cin-bench[hidden]{display: none;}
.cin-viewer{min-width: 0;}
.cin-strip{background: var(--cin-stage);border-radius: 12px;padding: 0.75rem;}
.cin-strip-top{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 0.5rem 1rem;margin-bottom: 0.65rem;}
.cin-src{min-width: 0;color: #e9e9e4;}
.cin-src-name{display: block;font-size: 0.88rem;font-weight: 600;overflow-wrap: anywhere;}
.cin-src-meta{display: block;font-size: 0.76rem;color: #a9abb3;}
.cin-view{display: inline-flex;background: var(--cin-stage-2);border-radius: 7px;padding: 2px;}
.cin-view button{font-size: 0.78rem;font-weight: 600;color: #c9cad0;background: transparent;border: 0;border-radius: 5px;padding: 0.26rem 0.6rem;cursor: pointer;}
.cin-view button[aria-pressed="true"]{background: #ffffff;color: var(--cin-ink);}
.cin-stage{display: grid;grid-template-columns: minmax(0, 1fr);gap: 0.65rem;}
.cin-frame{margin: 0;min-width: 0;background: var(--cin-stage-2);border-radius: 4px;padding: 16px 8px;background-image: radial-gradient(circle at center, #0c0d10 0, #0c0d10 3px, transparent 3.5px), radial-gradient(circle at center, #0c0d10 0, #0c0d10 3px, transparent 3.5px);background-size: 16px 16px, 16px 16px;background-position: 0 0, 0 100%;background-repeat: repeat-x, repeat-x;}
.cin-frame-box{position: relative;display: flex;align-items: center;justify-content: center;min-height: 160px;}
.cin-frame canvas{display: block;max-width: 100%;max-height: 62vh;width: auto;height: auto;cursor: crosshair;background-color: #ffffff;background-image: linear-gradient(45deg, #cfd0d4 25%, transparent 25%, transparent 75%, #cfd0d4 75%), linear-gradient(45deg, #cfd0d4 25%, transparent 25%, transparent 75%, #cfd0d4 75%);background-size: 16px 16px;background-position: 0 0, 8px 8px;}
.cin-frame figcaption{margin-top: 0.4rem;font-size: 0.76rem;font-weight: 600;letter-spacing: 0.04em;color: #c9cad0;text-align: center;}
.cin-mark{position: absolute;width: 15px;height: 15px;margin: -8px 0 0 -8px;border: 2px solid #ffffff;border-radius: 50%;box-shadow: 0 0 0 1px #000000;pointer-events: none;}
.cin-stage[data-view="after"] .cin-frame-before{display: none;}
.cin-probe{display: flex;flex-wrap: wrap;align-items: center;gap: 0.4rem 1rem;min-height: 2.5rem;margin-top: 0.65rem;padding: 0.45rem 0.7rem;background: var(--cin-panel);border: 1px solid var(--cin-line);border-radius: 9px;font-size: 0.84rem;color: var(--cin-dim);}
.cin-probe-out{display: flex;flex-wrap: wrap;align-items: center;gap: 0.4rem 1rem;}
.cin-probe-out[hidden]{display: none;}
.cin-probe-pair{display: inline-flex;align-items: center;gap: 0.4rem;}
.cin-probe-pair code{font-family: var(--cin-mono);font-size: 0.8rem;color: var(--cin-ink);background: none;padding: 0;}
.cin-swatch{display: inline-block;width: 20px;height: 20px;border: 1px solid var(--cin-line-2);border-radius: 4px;}
.cin-controls{display: flex;flex-direction: column;gap: 0.95rem;min-width: 0;background: var(--cin-panel);border: 1px solid var(--cin-line);border-radius: 12px;padding: 0.95rem;}
.cin-group[hidden]{display: none;}
.cin-label{display: flex;align-items: center;justify-content: space-between;gap: 0.5rem;margin-bottom: 0.4rem;font-size: 0.8rem;font-weight: 700;color: var(--cin-ink);}
.cin-label output{font-family: var(--cin-mono);font-weight: 600;color: var(--cin-blue-2);}
.cin-modes{display: grid;grid-template-columns: minmax(0, 1fr);gap: 0.3rem;}
.cin-mode{font-size: 0.88rem;font-weight: 600;text-align: left;color: var(--cin-ink-2);background: var(--cin-paper);border: 1px solid var(--cin-line);border-radius: 8px;padding: 0.42rem 0.65rem;cursor: pointer;}
.cin-mode:hover{border-color: var(--cin-blue);}
.cin-mode[aria-pressed="true"]{background: var(--cin-blue);border-color: var(--cin-blue);color: #ffffff;}
.cin-help{margin: 0.45rem 0 0;font-size: 0.8rem;line-height: 1.45;color: var(--cin-dim);}
.cin-toggle{display: grid;grid-auto-flow: column;grid-auto-columns: minmax(0, 1fr);gap: 0.3rem;}
.cin-toggle button{font-size: 0.84rem;font-weight: 600;color: var(--cin-ink-2);background: var(--cin-paper);border: 1px solid var(--cin-line);border-radius: 7px;padding: 0.34rem 0.4rem;cursor: pointer;}
.cin-toggle button[aria-pressed="true"]{background: var(--cin-ink);border-color: var(--cin-ink);color: #ffffff;}
.cin-range{width: 100%;accent-color: var(--cin-blue);}
.cin-warn{margin: 0.35rem 0 0;font-size: 0.78rem;color: var(--cin-amber-ink);}
.cin-warn[hidden]{display: none;}
.cin-select{width: 100%;font-size: 0.88rem;color: var(--cin-ink);background: var(--cin-panel);border: 1px solid var(--cin-line-2);border-radius: 7px;padding: 0.4rem 0.5rem;}
.cin-actions{display: grid;grid-template-columns: minmax(0, 1fr) auto;gap: 0.4rem;}
.cin-dl{font-size: 0.95rem;font-weight: 700;color: #ffffff;background: var(--cin-blue);border: 0;border-radius: 8px;padding: 0.6rem 0.8rem;cursor: pointer;}
.cin-dl:hover{background: var(--cin-blue-2);}
.cin-dl:disabled{opacity: 0.65;cursor: progress;}
.cin-save-note{margin: 0;font-size: 0.78rem;color: var(--cin-dim);}
.cin-mode:focus-visible, .cin-toggle button:focus-visible, .cin-view button:focus-visible, .cin-mini:focus-visible, .cin-dl:focus-visible, .cin-range:focus-visible, .cin-select:focus-visible{outline: 2px solid var(--cin-blue);outline-offset: 2px;}
.cin-copy{margin: 0 auto 2.2rem;color: var(--cin-ink-2);font-size: 1.02rem;line-height: 1.7;}
.cin-copy h2{margin: 0 0 0.7rem;font-size: 1.5rem;font-weight: 700;line-height: 1.25;color: var(--cin-ink);}
.cin-copy p{margin: 0 0 0.85rem;}
.cin-copy a{color: var(--cin-blue-2);}
.cin-copy code{font-family: var(--cin-mono);font-size: 0.88em;color: var(--cin-ink);background: var(--cin-paper);padding: 0.08em 0.3em;border-radius: 4px;}
.cin-math{margin: 0 0 0.9rem;padding: 0.8rem 1rem;background: var(--cin-stage);color: #f2f2ee;border-radius: 9px;font-family: var(--cin-mono);font-size: 0.92rem;line-height: 1.6;overflow-x: auto;}
.cin-math code{background: none;color: inherit;padding: 0;}
.cin-table-wrap{overflow-x: auto;margin-bottom: 0.85rem;border: 1px solid var(--cin-line);border-radius: 10px;}
.cin-table{width: 100%;min-width: 560px;border-collapse: collapse;font-size: 0.92rem;background: var(--cin-panel);}
.cin-table th{padding: 0.55rem 0.75rem;text-align: left;font-size: 0.8rem;color: var(--cin-dim);background: var(--cin-paper);border-bottom: 1px solid var(--cin-line);}
.cin-table td{padding: 0.5rem 0.75rem;border-top: 1px solid var(--cin-line);white-space: nowrap;}
.cin-table tr:first-child td{border-top: 0;}
.cin-table .cin-swatch{vertical-align: -5px;margin-right: 0.45rem;}
.cin-jobs{list-style: none;margin: 0;padding: 0;border-top: 1px solid var(--cin-line);}
.cin-jobs li{display: grid;grid-template-columns: minmax(0, 1fr);gap: 0.15rem;padding: 0.7rem 0;border-bottom: 1px solid var(--cin-line);}
.cin-jobs strong{color: var(--cin-ink);}
.cin-steps{margin: 0 0 0.85rem;padding-left: 1.3rem;}
.cin-steps li{margin-bottom: 0.3rem;}
.cin-callout{padding: 0.95rem 1.1rem;background: var(--cin-amber-soft);border-left: 4px solid var(--cin-amber);border-radius: 0 10px 10px 0;}
.cin-callout h2{font-size: 1.18rem;margin-bottom: 0.35rem;}
.cin-callout p:last-child{margin-bottom: 0;}
.cin-limits{margin: 0;padding-left: 1.2rem;}
.cin-limits li{margin-bottom: 0.35rem;}
.cin-closing{display: grid;grid-template-columns: minmax(0, 1fr);gap: 1.25rem;align-items: start;margin-top: 1rem;}
.cin-closing > section{margin: 0;min-width: 0;}
@media (min-width: 640px){.cin-stage{grid-template-columns: repeat(2, minmax(0, 1fr));}.cin-stage[data-view="after"]{grid-template-columns: minmax(0, 1fr);}.cin-jobs li{grid-template-columns: 170px minmax(0, 1fr);gap: 1rem;}}
@media (min-width: 992px){.cin-bench{grid-template-columns: minmax(0, 1fr) 300px;align-items: start;}.cin-closing{grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);}}
@media (max-width: 575px){.cin-drop{flex-direction: column;text-align: center;padding: 2rem 1rem;}.cin-drop.is-loaded{flex-direction: row;text-align: left;}.cin-copy h2{font-size: 1.3rem;}}