.sgf-root{--sgf-surface: #ffffff;--sgf-muted: #f4f6fc;--sgf-border: rgba(15,23,42,.12);--sgf-border-strong: rgba(15,23,42,.24);--sgf-text: #0f172a;--sgf-dim: rgba(15,23,42,.64);--sgf-primary: #4f46e5;--sgf-primary-dark: #4338ca;--sgf-primary-soft: rgba(79,70,229,.10);--sgf-sig: #0f766e;--sgf-sig-soft: rgba(15,118,110,.12);--sgf-amb: #b45309;--sgf-amb-soft: rgba(180,83,9,.12);--sgf-off: #64748b;--sgf-off-soft: rgba(100,116,139,.14);--sgf-shadow: 0 18px 44px rgba(15,23,42,.09);--sgf-shadow-sm: 0 2px 8px rgba(15,23,42,.06);--sgf-radius: 18px;--sgf-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;}
:root{--primary: #4f46e5;--primary-dark: #4338ca;--border: rgba(15,23,42,.12);--surface: #ffffff;--shadow-soft: 0 18px 44px rgba(15,23,42,.09);--surface-muted: #f4f6fc;--text-main: #0f172a;--text-muted: rgba(15,23,42,.64);}
.sgf-root{color: var(--sgf-text);padding-bottom: 8px;}
.sgf-root .tool-hero{margin-bottom: 12px;}
.sgf-byline{display: flex;flex-wrap: wrap;align-items: center;gap: 8px 16px;margin: 18px 0 4px;padding: 10px 14px;border-radius: 12px;background: var(--sgf-muted);border: 1px solid var(--sgf-border);font-size: .86rem;color: var(--sgf-dim);}
.sgf-byline-author a{color: var(--sgf-primary-dark);font-weight: 600;text-decoration: none;}
.sgf-byline-author a:hover{text-decoration: underline;}
.sgf-byline-updated{margin-left: auto;}
.sgf-app{display: grid;grid-template-columns: 1fr;gap: 18px;margin-top: 20px;}
@media (min-width:992px){.sgf-app{grid-template-columns: minmax(0,380px) minmax(0,1fr);align-items: start;}}
.sgf-card{background: var(--sgf-surface);border: 1px solid var(--sgf-border);border-radius: var(--sgf-radius);box-shadow: var(--sgf-shadow-sm);padding: 20px;}
.sgf-card--panel{box-shadow: var(--sgf-shadow);}
.sgf-cardhead{margin-bottom: 16px;}
.sgf-cardhead h2{font-size: 1.05rem;font-weight: 700;margin: 0 0 4px;}
.sgf-cardhead p{font-size: .88rem;color: var(--sgf-dim);margin: 0;line-height: 1.55;}
.sgf-field{margin-bottom: 16px;}
.sgf-label{display: block;font-size: .82rem;font-weight: 700;text-transform: uppercase;letter-spacing: .06em;color: var(--sgf-dim);margin-bottom: 7px;}
.sgf-input{width: 100%;padding: 13px 15px;border: 1.5px solid var(--sgf-border-strong);border-radius: 12px;background: var(--sgf-surface);font-family: var(--sgf-mono);font-size: 1.12rem;font-weight: 600;color: var(--sgf-text);transition: border-color .15s ease, box-shadow .15s ease;}
.sgf-input:focus{outline: none;border-color: var(--sgf-primary);box-shadow: 0 0 0 4px var(--sgf-primary-soft);}
.sgf-input.is-invalid{border-color: #dc2626;box-shadow: 0 0 0 4px rgba(220,38,38,.10);}
.sgf-hint{font-size: .8rem;color: var(--sgf-dim);margin-top: 7px;line-height: 1.5;}
.sgf-stepper{display: flex;align-items: stretch;gap: 8px;}
.sgf-stepbtn{width: 46px;flex: 0 0 46px;border: 1.5px solid var(--sgf-border-strong);border-radius: 12px;background: var(--sgf-muted);color: var(--sgf-text);font-size: 1.15rem;font-weight: 700;line-height: 1;cursor: pointer;transition: background .15s ease, border-color .15s ease;}
.sgf-stepbtn:hover{background: var(--sgf-primary-soft);border-color: var(--sgf-primary);color: var(--sgf-primary-dark);}
.sgf-stepbtn:disabled{opacity: .4;cursor: not-allowed;}
.sgf-stepper .sgf-input{text-align: center;}
.sgf-modes{display: grid;grid-template-columns: 1fr 1fr;gap: 8px;}
.sgf-mode{position: relative;}
.sgf-mode input{position: absolute;opacity: 0;width: 0;height: 0;}
.sgf-mode span{display: block;padding: 10px 12px;border: 1.5px solid var(--sgf-border-strong);border-radius: 12px;text-align: center;font-size: .84rem;font-weight: 600;cursor: pointer;transition: all .15s ease;}
.sgf-mode small{display: block;font-weight: 500;font-size: .72rem;color: var(--sgf-dim);margin-top: 2px;}
.sgf-mode input:checked + span{border-color: var(--sgf-primary);background: var(--sgf-primary-soft);color: var(--sgf-primary-dark);}
.sgf-mode input:focus-visible + span{box-shadow: 0 0 0 4px var(--sgf-primary-soft);}
.sgf-examples{display: flex;flex-wrap: wrap;gap: 7px;}
.sgf-example{padding: 7px 11px;border: 1px solid var(--sgf-border);border-radius: 999px;background: var(--sgf-muted);font-family: var(--sgf-mono);font-size: .82rem;color: var(--sgf-text);cursor: pointer;transition: all .15s ease;}
.sgf-example:hover{border-color: var(--sgf-primary);background: var(--sgf-primary-soft);color: var(--sgf-primary-dark);}
.sgf-example em{font-style: normal;color: var(--sgf-dim);font-size: .74rem;margin-left: 5px;}
.sgf-readout{display: grid;gap: 16px;}
.sgf-answer{border: 1px solid var(--sgf-border);border-radius: 14px;background: linear-gradient(140deg, rgba(79,70,229,.06), rgba(15,118,110,.05));padding: 20px;}
.sgf-answer-label{font-size: .76rem;font-weight: 700;text-transform: uppercase;letter-spacing: .08em;color: var(--sgf-dim);margin-bottom: 8px;}
.sgf-answer-value{font-family: var(--sgf-mono);font-size: clamp(1.8rem, 4.6vw, 2.6rem);font-weight: 700;line-height: 1.1;word-break: break-all;margin: 0;}
.sgf-answer-sub{font-size: .88rem;color: var(--sgf-dim);margin: 10px 0 0;line-height: 1.55;}
.sgf-breakdown{border: 1px solid var(--sgf-border);border-radius: 14px;padding: 18px;}
.sgf-breakdown h3{font-size: .95rem;font-weight: 700;margin: 0 0 4px;}
.sgf-breakdown > p{font-size: .84rem;color: var(--sgf-dim);margin: 0 0 14px;}
.sgf-digits{display: flex;flex-wrap: wrap;gap: 6px;margin-bottom: 14px;}
.sgf-digit{display: flex;flex-direction: column;align-items: center;gap: 5px;min-width: 34px;padding: 8px 6px 7px;border-radius: 10px;border: 1px solid var(--sgf-border);background: var(--sgf-muted);font-family: var(--sgf-mono);font-size: 1.3rem;font-weight: 700;line-height: 1;cursor: help;}
.sgf-digit::after{content: attr(data-tag);font-family: inherit;font-size: .58rem;font-weight: 700;text-transform: uppercase;letter-spacing: .05em;}
.sgf-digit--sig{border-color: rgba(15,118,110,.4);background: var(--sgf-sig-soft);color: var(--sgf-sig);}
.sgf-digit--amb{border-color: rgba(180,83,9,.4);background: var(--sgf-amb-soft);color: var(--sgf-amb);}
.sgf-digit--off{border-color: var(--sgf-border);background: var(--sgf-off-soft);color: var(--sgf-off);}
.sgf-digit--point{border-style: dashed;background: transparent;color: var(--sgf-dim);}
.sgf-digit--exp{min-width: auto;padding-left: 10px;padding-right: 10px;font-size: 1rem;background: transparent;color: var(--sgf-dim);border-style: dashed;}
.sgf-legend{display: flex;flex-wrap: wrap;gap: 6px 16px;font-size: .78rem;color: var(--sgf-dim);}
.sgf-legend span{display: inline-flex;align-items: center;gap: 6px;}
.sgf-swatch{width: 11px;height: 11px;border-radius: 3px;display: inline-block;}
.sgf-swatch--sig{background: var(--sgf-sig);}
.sgf-swatch--amb{background: var(--sgf-amb);}
.sgf-swatch--off{background: var(--sgf-off);}
.sgf-tiles{display: grid;grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));gap: 10px;}
.sgf-tile{border: 1px solid var(--sgf-border);border-radius: 12px;padding: 13px 14px;background: var(--sgf-surface);}
.sgf-tile dt{font-size: .74rem;font-weight: 700;text-transform: uppercase;letter-spacing: .06em;color: var(--sgf-dim);margin-bottom: 6px;}
.sgf-tile dd{font-family: var(--sgf-mono);font-size: 1.24rem;font-weight: 700;margin: 0;word-break: break-word;line-height: 1.25;}
.sgf-tile dd sup{font-size: .62em;}
.sgf-notes{display: grid;gap: 9px;}
.sgf-note{display: flex;gap: 11px;padding: 13px 15px;border-radius: 12px;font-size: .87rem;line-height: 1.55;border: 1px solid var(--sgf-border);background: var(--sgf-muted);color: var(--sgf-text);}
.sgf-note i{margin-top: 3px;font-size: .9rem;}
.sgf-note--warn{border-color: rgba(180,83,9,.32);background: var(--sgf-amb-soft);color: #7c3d06;}
.sgf-note--warn i{color: var(--sgf-amb);}
.sgf-note--info i{color: var(--sgf-primary);}
.sgf-note strong{font-family: var(--sgf-mono);}
.sgf-steps{border: 1px solid var(--sgf-border);border-radius: 14px;padding: 18px;background: var(--sgf-muted);}
.sgf-steps h3{font-size: .95rem;font-weight: 700;margin: 0 0 12px;}
.sgf-steps ol{margin: 0;padding-left: 20px;display: grid;gap: 8px;}
.sgf-steps li{font-size: .88rem;line-height: 1.55;color: var(--sgf-text);}
.sgf-steps code{font-family: var(--sgf-mono);background: var(--sgf-surface);border: 1px solid var(--sgf-border);border-radius: 5px;padding: 1px 5px;color: var(--sgf-primary-dark);font-size: .92em;}
.sgf-toolbar{display: flex;flex-wrap: wrap;gap: 9px;}
.sgf-btn{display: inline-flex;align-items: center;gap: 8px;padding: 10px 16px;border-radius: 11px;border: 1.5px solid var(--sgf-border-strong);background: var(--sgf-surface);font-size: .87rem;font-weight: 600;color: var(--sgf-text);cursor: pointer;transition: all .15s ease;}
.sgf-btn:hover{border-color: var(--sgf-primary);color: var(--sgf-primary-dark);background: var(--sgf-primary-soft);}
.sgf-btn--primary{background: var(--sgf-primary);border-color: var(--sgf-primary);color: #fff;}
.sgf-btn--primary:hover{background: var(--sgf-primary-dark);border-color: var(--sgf-primary-dark);color: #fff;}
.sgf-empty{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 10px;padding: 48px 20px;text-align: center;color: var(--sgf-dim);}
.sgf-empty i{font-size: 1.8rem;color: var(--sgf-primary);opacity: .6;}
.sgf-empty p{margin: 0;font-size: .92rem;max-width: 340px;line-height: 1.6;}
.sgf-content{margin-top: 40px;display: grid;gap: 30px;}
.sgf-content h2{font-size: clamp(1.3rem, 2.4vw, 1.65rem);font-weight: 700;letter-spacing: -.01em;margin-bottom: 12px;}
.sgf-content h3{font-size: 1.06rem;font-weight: 700;margin: 20px 0 8px;}
.sgf-content p{font-size: .98rem;line-height: 1.7;color: var(--sgf-dim);margin-bottom: 12px;}
.sgf-content p strong{color: var(--sgf-text);}
.sgf-content a{color: var(--sgf-primary-dark);font-weight: 600;}
.sgf-content ul{padding-left: 20px;margin-bottom: 14px;display: grid;gap: 7px;}
.sgf-content li{font-size: .96rem;line-height: 1.65;color: var(--sgf-dim);}
.sgf-content code{font-family: var(--sgf-mono);background: var(--sgf-muted);border: 1px solid var(--sgf-border);border-radius: 5px;padding: 1px 6px;color: var(--sgf-primary-dark);font-size: .9em;}
.sgf-tablewrap{overflow-x: auto;border: 1px solid var(--sgf-border);border-radius: 14px;margin-bottom: 14px;}
.sgf-table{width: 100%;min-width: 560px;border-collapse: collapse;margin: 0;font-size: .92rem;}
.sgf-table th{background: var(--sgf-muted);text-align: left;padding: 12px 15px;font-weight: 700;font-size: .82rem;text-transform: uppercase;letter-spacing: .05em;color: var(--sgf-dim);border-bottom: 1px solid var(--sgf-border);}
.sgf-table td{padding: 12px 15px;border-bottom: 1px solid var(--sgf-border);color: var(--sgf-dim);vertical-align: top;}
.sgf-table tr:last-child td{border-bottom: 0;}
.sgf-table td:first-child{font-family: var(--sgf-mono);font-weight: 600;color: var(--sgf-text);white-space: nowrap;}
.sgf-callout{border: 1px solid rgba(180,83,9,.3);background: var(--sgf-amb-soft);border-radius: 14px;padding: 18px 20px;}
.sgf-callout h3{margin-top: 0;color: #7c3d06;}
.sgf-callout p, .sgf-callout li{color: #7c3d06;}
.sgf-callout ul{margin-bottom: 0;}
.sgf-sr{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);white-space: nowrap;border: 0;}
@media (max-width:575px){.sgf-modes{grid-template-columns: 1fr;}.sgf-byline-updated{margin-left: 0;}.sgf-btn{flex: 1 1 auto;justify-content: center;}}
@media (prefers-reduced-motion: reduce){.sgf-root *{transition-duration: .01ms !important;animation-duration: .01ms !important;}}