:root{--stx-paper: #f4f1ea;--stx-card: #fffdf8;--stx-ink: #171714;--stx-muted: #68675f;--stx-line: #d9d4c8;--stx-orange: #f05a36;--stx-orange-dark: #bd351f;--stx-blue: #bfe6ed;--stx-blue-dark: #166274;--stx-green: #1d8064;--stx-shadow: 0 24px 70px rgba(49,43,32,0.12);--stx-radius: 24px;--primary: #f05a36;--primary-dark: #bd351f;--border: #d9d4c8;--surface: #fffdf8;--surface-muted: #ebe7de;--shadow-soft: 0 18px 45px rgba(49,43,32,0.1);--text-main: #171714;--text-muted: #68675f;}
.stx-page{position: relative;overflow: hidden;padding: 2rem 0 5rem;color: var(--stx-ink);}
.stx-page>.container{position: relative;z-index: 1;}
.stx-hero{display: grid;grid-template-columns: minmax(0,1.45fr) minmax(280px,0.65fr);gap: clamp(2rem,6vw,5rem);align-items: center;padding: 1.25rem 0 3.5rem;}
.stx-hero h1{max-width: 780px;margin: 0;font-size: clamp(2rem,4.2vw,4.5rem);font-weight: 900;line-height: 0.96;letter-spacing: -0.058em;text-wrap: balance;}
.stx-hero-copy>p{max-width: 680px;margin: 1.45rem 0 0;font-size: clamp(1rem,2vw,1.2rem);line-height: 1.7;color: var(--stx-muted);}
.stx-hero-facts{display: flex;flex-wrap: wrap;gap: 0.65rem 1.2rem;margin-top: 1.5rem;font-size: 0.82rem;font-weight: 750;color: var(--stx-ink);}
.stx-hero-facts span{display: inline-flex;align-items: center;gap: 0.42rem;}
.stx-hero-facts i{color: var(--stx-orange);}
.stx-hero-proof{position: relative;display: flex;min-height: 320px;flex-direction: column;align-items: center;justify-content: center;padding: 2rem;border: 1px solid rgba(23,23,20,0.16);border-radius: 50% 50% 48% 52% / 44% 46% 54% 56%;background: var(--stx-card);box-shadow: var(--stx-shadow);transform: rotate(2deg);text-align: center;}
.stx-hero-proof::after{content: "";position: absolute;inset: 12px;border: 1px dashed rgba(240,90,54,0.35);border-radius: inherit;pointer-events: none;}
.stx-proof-label{position: relative;z-index: 1;margin-bottom: 1.3rem;font-size: 0.7rem;font-weight: 850;letter-spacing: 0.12em;text-transform: uppercase;color: var(--stx-orange-dark);}
.stx-hero-proof p{position: relative;z-index: 1;margin: 0;font-size: clamp(1.08rem,2.2vw,1.45rem);font-weight: 800;}
.stx-proof-old{color: var(--stx-muted);}
.stx-proof-new{max-width: 230px;color: var(--stx-blue-dark);text-decoration: line-through;text-decoration-color: var(--stx-orange);text-decoration-thickness: 3px;}
.stx-hero-proof i{position: relative;z-index: 1;margin: 0.9rem 0;color: var(--stx-orange);font-size: 0.85rem;}
.stx-byline{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 0.5rem 1rem;margin: 0 0 1rem;padding: 0.75rem 0.2rem;border-top: 1px solid rgba(23,23,20,0.12);font-size: 0.8rem;color: var(--stx-muted);}
.stx-byline-author{font-weight: 700;color: var(--stx-ink);}
.stx-byline-author .author-link{color: var(--stx-orange-dark);text-decoration: none;border-bottom: 1px solid rgba(189,53,31,0.3);}
.stx-byline-author .author-link:hover{border-color: var(--stx-orange-dark);}
.stx-byline-updated{font-weight: 650;white-space: nowrap;}
.stx-workbench{position: relative;border: 1px solid rgba(23,23,20,0.18);border-radius: var(--stx-radius);background: var(--stx-card);box-shadow: var(--stx-shadow);overflow: hidden;}
.stx-workbench-bar{display: flex;align-items: center;justify-content: space-between;gap: 1rem;padding: 0.8rem 1.25rem;border-bottom: 1px solid var(--stx-line);background: #23231f;color: #fff;}
.stx-workbench-bar>div{display: flex;align-items: center;gap: 0.55rem;}
.stx-workbench-bar p{margin: 0;font-size: 0.76rem;font-weight: 650;color: rgba(255,255,255,0.68);}
.stx-workbench-label{font-size: 0.72rem;font-weight: 850;letter-spacing: 0.1em;text-transform: uppercase;}
.stx-live-dot{width: 8px;height: 8px;border-radius: 50%;background: #57d7a0;box-shadow: 0 0 0 5px rgba(87,215,160,0.12);}
.stx-editor-grid{display: grid;grid-template-columns: minmax(0,1fr) 86px minmax(0,1fr);align-items: stretch;}
.stx-editor{display: flex;min-width: 0;flex-direction: column;padding: clamp(1.15rem,3vw,2rem);}
.stx-editor-output{background: #f1ede5;}
.stx-editor-head{display: flex;align-items: center;justify-content: space-between;gap: 1rem;margin-bottom: 0.8rem;}
.stx-editor-head label{font-size: 0.82rem;font-weight: 850;letter-spacing: 0.06em;text-transform: uppercase;}
.stx-editor-head span{font-size: 0.73rem;font-weight: 700;color: var(--stx-muted);}
.stx-editor textarea{width: 100%;min-height: 290px;padding: 1.2rem;border: 1px solid var(--stx-line);border-radius: 16px;background: rgba(255,255,255,0.72);color: var(--stx-ink);font: 600 1.05rem/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize: vertical;transition: border-color 0.18s ease,box-shadow 0.18s ease,background 0.18s ease;}
.stx-editor textarea:focus{outline: none;border-color: var(--stx-orange);background: #fff;box-shadow: 0 0 0 4px rgba(240,90,54,0.13);}
.stx-editor textarea::placeholder{color: #99968d;font-weight: 500;}
.stx-editor-output textarea{color: var(--stx-blue-dark);background: rgba(255,255,255,0.58);}
.stx-editor-note{margin: 0.7rem 0 0;font-size: 0.76rem;line-height: 1.5;color: var(--stx-muted);}
.stx-strike-bridge{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 0.25rem;border-right: 1px solid var(--stx-line);border-left: 1px solid var(--stx-line);background: var(--stx-blue);}
.stx-strike-bridge strong{display: grid;width: 52px;height: 52px;place-items: center;border: 2px solid var(--stx-ink);border-radius: 50%;background: var(--stx-card);font-size: 1.45rem;box-shadow: 4px 4px 0 var(--stx-ink);}
.stx-strike-bridge span{font-size: 0.6rem;font-weight: 900;letter-spacing: 0.12em;text-transform: uppercase;color: var(--stx-blue-dark);}
.stx-actions{display: flex;flex-wrap: wrap;gap: 0.65rem;padding: 1rem 1.25rem;border-top: 1px solid var(--stx-line);background: var(--stx-card);}
.stx-button{display: inline-flex;min-height: 46px;flex: 1 1 145px;align-items: center;justify-content: center;gap: 0.5rem;padding: 0.65rem 1rem;border: 1px solid var(--stx-line);border-radius: 12px;background: #f1ede5;color: var(--stx-ink);font-size: 0.86rem;font-weight: 800;cursor: pointer;transition: transform 0.16s ease,border-color 0.16s ease,background 0.16s ease,box-shadow 0.16s ease;}
.stx-button:hover:not(:disabled){transform: translateY(-2px);border-color: var(--stx-ink);box-shadow: 0 7px 16px rgba(49,43,32,0.1);}
.stx-button:focus-visible{outline: 3px solid rgba(240,90,54,0.28);outline-offset: 2px;}
.stx-button:disabled{opacity: 0.45;cursor: not-allowed;}
.stx-button-primary{border-color: var(--stx-ink);background: var(--stx-ink);color: #fff;}
.stx-button-primary:hover:not(:disabled){background: var(--stx-orange);border-color: var(--stx-orange);}
.stx-button[data-state="copied"]{background: var(--stx-green);border-color: var(--stx-green);color: #fff;}
.stx-status{display: none;margin: 0 1.25rem 1rem;padding: 0.7rem 0.9rem;border-radius: 10px;font-size: 0.82rem;font-weight: 700;}
.stx-status.is-visible{display: block;}
.stx-status.is-success{background: rgba(29,128,100,0.11);color: #11644e;}
.stx-status.is-warning{background: rgba(240,90,54,0.12);color: var(--stx-orange-dark);}
.stx-status.is-neutral{background: rgba(22,98,116,0.1);color: var(--stx-blue-dark);}
.stx-story{margin-top: clamp(3.5rem,8vw,7rem);}
.stx-section-number{display: inline-block;margin-bottom: 0.7rem;font: 800 0.72rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing: 0.14em;color: var(--stx-orange-dark);}
.stx-story h2{margin: 0;font-size: clamp(1.75rem,4vw,3.2rem);font-weight: 900;line-height: 1.05;letter-spacing: -0.04em;text-wrap: balance;}
.stx-story p{font-size: 1rem;line-height: 1.78;color: var(--stx-muted);}
.stx-story a{color: var(--stx-orange-dark);font-weight: 750;text-decoration: none;border-bottom: 1px solid rgba(189,53,31,0.3);}
.stx-story a:hover{border-color: var(--stx-orange-dark);}
.stx-opening{display: grid;grid-template-columns: minmax(260px,0.85fr) minmax(320px,1fr);gap: clamp(2rem,7vw,7rem);align-items: start;}
.stx-opening-copy p{margin: 0 0 1.15rem;}
.stx-opening-copy .stx-lead{font-size: 1.2rem;line-height: 1.65;color: var(--stx-ink);}
.stx-situations{display: grid;grid-template-columns: repeat(3,1fr);gap: 1rem;margin: 3rem 0 5rem;}
.stx-situation{min-height: 210px;padding: 1.35rem;border: 1px solid rgba(23,23,20,0.16);border-radius: 18px;background: var(--stx-card);box-shadow: 7px 7px 0 rgba(23,23,20,0.08);}
.stx-situation-accent{background: var(--stx-blue);}
.stx-situation>span{font-size: 0.7rem;font-weight: 850;letter-spacing: 0.1em;text-transform: uppercase;color: var(--stx-orange-dark);}
.stx-situation p{margin: 2.2rem 0 1rem;font-size: 1.12rem;font-weight: 800;line-height: 1.5;color: var(--stx-ink);}
.stx-situation s{text-decoration-color: var(--stx-orange);text-decoration-thickness: 3px;}
.stx-situation small{display: block;font-size: 0.8rem;line-height: 1.5;color: var(--stx-muted);}
.stx-anatomy{display: grid;grid-template-columns: minmax(260px,0.72fr) minmax(0,1.28fr);gap: clamp(2rem,6vw,5rem);align-items: center;padding: clamp(1.5rem,4vw,3rem);border: 1px solid rgba(23,23,20,0.16);border-radius: var(--stx-radius);background: #22221e;color: #fff;box-shadow: var(--stx-shadow);}
.stx-anatomy-copy p{margin: 1.1rem 0 0;color: rgba(255,255,255,0.7);}
.stx-anatomy .stx-section-number{color: #ff9b7f;}
.stx-code-figure{display: grid;grid-template-columns: 1fr auto 1fr auto 1fr;gap: 0.7rem;align-items: center;}
.stx-code-figure>i{color: #ff9b7f;}
.stx-code-piece{display: flex;min-height: 190px;flex-direction: column;align-items: center;justify-content: center;padding: 1rem;border: 1px solid rgba(255,255,255,0.18);border-radius: 16px;background: rgba(255,255,255,0.06);text-align: center;}
.stx-code-piece span{font-size: 0.64rem;font-weight: 850;letter-spacing: 0.1em;text-transform: uppercase;color: rgba(255,255,255,0.55);}
.stx-code-piece strong{margin: 1rem 0;font-size: 3rem;line-height: 1;color: #fff;}
.stx-code-piece code{font-size: 0.72rem;color: #aee8f3;}
.stx-mark-piece{background: rgba(191,230,237,0.11);}
.stx-result-piece{border-color: rgba(240,90,54,0.68);background: rgba(240,90,54,0.1);}
.stx-caveat{display: grid;grid-template-columns: 90px minmax(0,1fr);gap: 2rem;margin: 5rem 0;padding: clamp(1.5rem,4vw,3rem);border-top: 2px solid var(--stx-orange);border-bottom: 2px solid var(--stx-orange);background: rgba(255,253,248,0.5);}
.stx-caveat-icon{display: grid;width: 72px;height: 72px;place-items: center;border: 2px solid var(--stx-orange);border-radius: 50%;color: var(--stx-orange);font-size: 1.7rem;}
.stx-caveat p{max-width: 900px;margin: 1.2rem 0 0;}
.stx-caveat code{padding: 0.12rem 0.35rem;border-radius: 4px;background: rgba(23,23,20,0.08);color: var(--stx-ink);}
.stx-caveat .stx-judgment{padding: 1rem 1.1rem;border-left: 4px solid var(--stx-orange);background: var(--stx-card);color: var(--stx-ink);}
.stx-next-move{display: grid;grid-template-columns: minmax(260px,0.8fr) minmax(320px,1.2fr);gap: clamp(2rem,7vw,7rem);align-items: start;}
.stx-next-move p{margin: 0 0 1.15rem;}
.stx-field-notes{display: grid;grid-template-columns: minmax(240px,0.7fr) minmax(0,1.3fr);gap: 2rem;margin-top: 4rem;padding: clamp(1.5rem,4vw,2.6rem);border-radius: var(--stx-radius);background: var(--stx-blue);}
.stx-field-notes-head>span{display: inline-block;margin-bottom: 0.65rem;font-size: 0.7rem;font-weight: 850;letter-spacing: 0.11em;text-transform: uppercase;color: var(--stx-blue-dark);}
.stx-field-notes h2{font-size: clamp(1.5rem,3vw,2.3rem);}
.stx-field-notes ol{display: grid;gap: 0;margin: 0;padding: 0;list-style: none;counter-reset: note;}
.stx-field-notes li{display: grid;grid-template-columns: minmax(150px,0.6fr) minmax(0,1fr);gap: 1rem;padding: 1rem 0;border-bottom: 1px solid rgba(22,98,116,0.2);counter-increment: note;}
.stx-field-notes li:last-child{border-bottom: 0;}
.stx-field-notes li strong::before{content: "0" counter(note) "  ";color: var(--stx-orange-dark);font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.stx-field-notes li span{font-size: 0.88rem;line-height: 1.55;color: var(--stx-blue-dark);}
@media (max-width: 991px){.stx-hero{grid-template-columns: 1fr;}.stx-hero-proof{width: min(100%,430px);min-height: 260px;justify-self: center;}.stx-opening,.stx-next-move{grid-template-columns: 1fr;gap: 1.5rem;}.stx-anatomy{grid-template-columns: 1fr;}.stx-situations{margin-bottom: 4rem;}.stx-field-notes{grid-template-columns: 1fr;}}
@media (max-width: 767px){.stx-page{padding-top: 1.25rem;}.stx-hero{padding-bottom: 2.5rem;}.stx-hero h1{font-size: clamp(2.4rem,12vw,4rem);}.stx-editor-grid{grid-template-columns: 1fr;}.stx-strike-bridge{min-height: 70px;flex-direction: row;border-top: 1px solid var(--stx-line);border-right: 0;border-bottom: 1px solid var(--stx-line);border-left: 0;}.stx-strike-bridge strong{width: 44px;height: 44px;font-size: 1.15rem;}.stx-editor textarea{min-height: 220px;}.stx-situations{grid-template-columns: 1fr;}.stx-situation{min-height: 170px;}.stx-situation p{margin-top: 1.4rem;}.stx-code-figure{grid-template-columns: 1fr;}.stx-code-figure>i{transform: rotate(90deg);justify-self: center;}.stx-code-piece{width: 100%;min-height: 150px;}.stx-caveat{grid-template-columns: 1fr;gap: 1.2rem;}.stx-field-notes li{grid-template-columns: 1fr;gap: 0.35rem;}}
@media (max-width: 480px){.stx-workbench-bar{align-items: flex-start;flex-direction: column;}.stx-editor{padding: 1rem;}.stx-actions{padding: 1rem;}.stx-button{flex-basis: 100%;}.stx-hero-proof{min-height: 235px;padding: 1.5rem;}.stx-byline{align-items: flex-start;flex-direction: column;}.stx-caveat-icon{width: 58px;height: 58px;font-size: 1.35rem;}}
@media (prefers-reduced-motion: reduce){.stx-button,.stx-editor textarea{transition: none;}}