.skill-page-app { width: min(1180px, calc(100% - 48px)); min-height: calc(100svh - 72px); margin-inline: auto; padding: 66px 0 110px; }
.skill-page-hero { max-width: 850px; margin: 0 0 52px; padding: 0; border: 0; }
.detail-back { min-height: 44px; display: inline-flex; align-items: center; margin-bottom: 28px; color: var(--muted); font-size: .81rem; }
.detail-back:hover { color: var(--red); }
.skill-page-hero > .eyebrow { margin: 0 0 13px; }
.skill-page-hero h1 { max-width: 820px; margin: 0; font-family: var(--serif); font-size: clamp(2.8rem,6.1vw,6.4rem); font-weight: 600; letter-spacing: -.06em; line-height: .98; text-wrap: balance; }
.skill-page-hero h1 em { color: var(--red); font-style: normal; }
.skill-page-hero > p:last-child { max-width: 680px; margin: 22px 0 0; color: var(--muted); font-size: 17px; line-height: 1.75; }
.skill-page-layout { display: grid; grid-template-columns: minmax(270px,.76fr) minmax(0,1.46fr); gap: 52px; padding-top: 0; }
.skill-facts { align-self: start; position: sticky; top: 95px; padding: 24px; border-top: 2px solid var(--red); border-bottom: 1px solid var(--line); background: linear-gradient(135deg, rgba(216,74,63,.08), transparent 56%), var(--ink-2); }
.fact-kicker { margin: 0; color: var(--red); font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; }
.skill-facts h2 { margin: 0; font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.15; letter-spacing: -.035em; }
.fact-category { margin: 10px 0 24px; color: var(--muted); font: .69rem var(--mono); letter-spacing: .11em; }
.skill-purchase { margin-top: 22px; padding: 18px 0 0; border-top: 1px solid var(--line); }
.skill-pricing-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 13px 18px; border: 1px solid var(--red); border-radius: 0; background: var(--red); color: #fff; cursor: pointer; font: 800 .78rem var(--mono); letter-spacing: .04em; text-decoration: none; transition: transform .18s ease, background .18s ease, color .18s ease; }.skill-pricing-btn:hover { background: var(--red-dark); transform: translateY(-2px); }.skill-pricing-btn:active { transform: translateY(1px) scale(.985); }.skill-pricing-btn i { font-style: normal; font-size: 1rem; line-height: 1; }
.skill-purchase p { margin: 9px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.55; }
.fact-list { margin: 0; }
.fact-list div { display: block; padding: 14px 0; border-top: 1px solid var(--line); font-size: .8rem; }
.fact-list dt { color: var(--muted); font: .63rem var(--mono); letter-spacing: .14em; }.fact-list dd { margin: 5px 0 0; color: var(--paper); text-align: left; }
.skill-page-note { margin: 19px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--paper-2); font-size: .81rem; line-height: 1.65; }
.integration-guide { margin-top: 14px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.integration-guide h3 { margin: 5px 0 8px; font: 600 19px/1.2 var(--serif); letter-spacing: -.03em; }
.integration-kicker { margin: 17px 0 5px; color: var(--red); font: .62rem var(--mono); letter-spacing: .13em; }.integration-kicker:first-child { margin-top: 0; }
.integration-guide > p:not(.integration-kicker), .integration-steps { color: var(--muted); font-size: .75rem; line-height: 1.65; }
.code-example pre { max-height: 236px; overflow: auto; margin: 12px 0 10px; padding: 12px; border: 1px solid var(--line); background: var(--ink); color: #e5bbb5; font: .68rem/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.integration-copy { width: 100%; min-height: 38px; border: 1px solid var(--red); background: transparent; color: var(--paper); cursor: pointer; font: .69rem var(--mono); }.integration-copy:hover { background: var(--red); color: #fff; }
.integration-state { min-height: 17px; margin: 7px 0 0; color: #d7b0a8; font-size: .69rem; }.integration-state.error { color: #e9b163; }
.integration-steps { display: grid; gap: 7px; margin: 15px 0 0; padding-left: 18px; }
.scenario-region-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.scenario-region-heading h2 { margin: 0; font-family: var(--serif); font-size: 29px; font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }.scenario-region-heading p { margin: 0; color: var(--muted); font-family: var(--mono); font-size: .69rem; letter-spacing: .1em; }
.scenario-item { border-bottom: 1px solid var(--line); }
.skill-page-app .scenario-toggle { width: 100%; display: grid; grid-template-columns: 34px minmax(0,1fr) 24px; gap: 14px; align-items: center; min-height: 66px; padding: 14px 2px; border: 0; background: transparent; color: var(--paper, #f3efe8); cursor: pointer; text-align: left; }.skill-page-app .scenario-toggle:hover { color: var(--red); }
.scenario-no { color: var(--red); font-family: var(--mono); font-size: .69rem; }.skill-page-app .scenario-title { color: inherit; font-size: 16px; font-weight: 650; line-height: 1.55; }.scenario-mark { justify-self: end; color: var(--red); font: 24px/1 var(--mono); }.scenario-toggle[aria-expanded="true"] .scenario-mark { transform: rotate(45deg); }
.scenario-panel { padding: 0 0 22px; }.dialogue { display: grid; gap: 11px; padding: 20px; border-left: 1px solid #55413d; background: var(--ink); }.dialogue-line { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 14px; }.dialogue-line > span { padding-top: 1px; color: var(--muted); font-family: var(--mono); font-size: .63rem; letter-spacing: .12em; }.dialogue-line p { margin: 0; color: var(--paper-2); font-size: 14px; line-height: 1.7; }.dialogue-line.user p { color: var(--paper); }.dialogue-line.process ol { margin: 0; padding-left: 19px; color: var(--paper-2); font-size: 14px; line-height: 1.7; }.dialogue-line.process li + li { margin-top: 6px; }.dialogue-line.check { padding-top: 11px; border-top: 1px solid #302d29; }.dialogue-line.check p { color: #d8a19a; }
@media (max-width: 850px) { .skill-page-layout { grid-template-columns: 1fr; gap: 48px; }.skill-facts { position: static; } }
@media (max-width: 620px) { .skill-page-app { width: min(100% - 32px,1180px); padding: 42px 0 76px; }.skill-page-hero { margin-bottom: 38px; }.skill-page-hero h1 { font-size: clamp(2.45rem,11vw,3.4rem); }.skill-page-hero > p:last-child { font-size: 15px; }.skill-facts { padding: 20px; }.scenario-region-heading { align-items: start; flex-direction: column; gap: 5px; }.scenario-region-heading h2 { font-size: 26px; }.scenario-toggle { grid-template-columns: 27px minmax(0,1fr) 22px; gap: 9px; }.scenario-title { font-size: 15px; }.dialogue { padding: 16px; }.dialogue-line { grid-template-columns: 1fr; gap: 3px; } }
.version-history{margin:0 auto 7rem;width:min(1180px,calc(100% - 48px));border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);gap:3rem;padding-top:2.5rem}.version-history-heading h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3.8rem);margin:.25rem 0}.version-history-heading>p:last-child{color:var(--muted);max-width:20rem}.version-entry{display:grid;grid-template-columns:150px minmax(0,1fr);gap:1.5rem;padding:1.35rem 0;border-bottom:1px solid var(--line)}.version-entry>div{display:flex;flex-direction:column;gap:.45rem}.version-entry time{color:var(--muted);font-size:.76rem;letter-spacing:.12em}.version-entry strong{color:var(--red);font-size:1.05rem}.version-entry ul{margin:0;padding-left:1.15rem}.version-entry li{margin:.18rem 0;line-height:1.7}@media(max-width:720px){.version-history{width:calc(100% - 32px);grid-template-columns:1fr;gap:1rem;margin-bottom:4rem}.version-entry{grid-template-columns:1fr;gap:.7rem}.version-entry>div{flex-direction:row;align-items:center;justify-content:space-between}}
.inline-experience { scroll-margin-top: 88px; width: min(1180px,calc(100% - 48px)); margin: -10px auto 70px; padding: clamp(22px,4vw,42px); border: 1px solid var(--line); border-top: 4px solid var(--red); background: var(--ink-2); }
.inline-experience > header { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,.56fr); gap: 28px; align-items: end; margin-bottom: 28px; }
.inline-experience > header .eyebrow { grid-column: 1 / -1; margin: 0 0 -10px; }
.inline-experience > header h2 { margin: 0; font: 600 clamp(2rem,4.3vw,4.25rem)/1 var(--serif); letter-spacing: -.05em; }
.inline-experience > header > p:last-child { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.7; }
.inline-experience form { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; align-items: end; }
.inline-experience label { display: grid; gap: 7px; color: var(--paper-2); font: 700 .7rem var(--mono); letter-spacing: .04em; }
.inline-experience input,.inline-experience select,.inline-experience textarea { width: 100%; min-height: 46px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 0; background: var(--ink); color: var(--paper); font: .8rem/1.45 var(--sans); }
.inline-experience textarea { min-height: 122px; resize: vertical; }
.inline-experience button { min-height: 46px; padding: 10px 15px; border: 1px solid var(--red); border-radius: 0; background: var(--red); color: #fff; cursor: pointer; font: 800 .72rem var(--mono); }
.inline-experience button:hover { background: var(--red-dark); }
.inline-experience button:disabled { cursor: wait; opacity: .62; }
.inline-experience input:focus-visible,.inline-experience select:focus-visible,.inline-experience textarea:focus-visible,.inline-experience button:focus-visible { outline: 3px solid rgba(216,74,63,.38); outline-offset: 2px; }
.experience-field-wide { grid-column: 1 / -1; }
.experience-privacy { margin: 16px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.65; }
.inline-experience .priority-form { grid-template-columns: 1fr; }
.priority-row { display: grid; grid-template-columns: minmax(0,1fr) repeat(3,minmax(130px,.42fr)); gap: 12px; }
.inline-experience .split-form { grid-template-columns: minmax(220px,.58fr) minmax(0,1.42fr); align-items: start; }
.inline-experience .split-form button { align-self: end; }
.inline-experience .reflection-form { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; }
.reflection-question { min-width: 0; padding: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.12); }
.reflection-question span { min-height: 3.2em; color: var(--paper); font: 500 .82rem/1.6 var(--sans); letter-spacing: 0; }
.reflection-form > button { grid-column: 1 / -1; }
.inline-result { margin-top: 24px; padding: 22px; border-left: 3px solid var(--red); background: var(--ink); color: var(--paper-2); }
.inline-result:focus-visible { outline: 3px solid rgba(216,74,63,.38); outline-offset: 4px; }
.inline-result.is-error { border-color: #e9b163; color: #f2ca91; }
.inline-result .result-kicker { margin: 0 0 8px; color: var(--red); font: 700 .68rem var(--mono); letter-spacing: .1em; }
.inline-result h3 { margin: 0 0 14px; color: var(--paper); font: 600 clamp(1.55rem,2.8vw,2.45rem)/1.15 var(--serif); letter-spacing: -.035em; }
.inline-result h4 { margin: 0 0 8px; color: var(--paper); font-size: .92rem; }
.inline-result ol,.inline-result ul { margin: 10px 0; padding-left: 1.3rem; }
.inline-result li { margin: 7px 0; line-height: 1.6; }
.inline-result small { display: block; margin-top: 3px; color: var(--muted); font-size: .7rem; }
.inline-result details { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); }
.inline-result summary { cursor: pointer; color: var(--paper); font-weight: 700; }
.inline-result blockquote { margin: 18px 0; padding: 15px 18px; border-left: 2px solid var(--red); background: rgba(216,74,63,.08); color: var(--paper); font: 600 1rem/1.75 var(--serif); }
.result-direct { font-size: .95rem; line-height: 1.75; }
.variable-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 18px 0 22px; }
.variable-grid article { padding: 14px; border: 1px solid var(--line); }
.variable-grid span { float: right; color: var(--red); font: 700 .68rem var(--mono); }
.variable-grid p { margin: 5px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.6; }
.branch-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 0 !important; list-style: none; }
.branch-list li { padding: 15px; border: 1px solid var(--line); }
.branch-list p { margin: 8px 0; }
.chart-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 18px 0; border-top: 1px solid var(--line); }
.chart-facts div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.chart-facts dt { color: var(--muted); font: .66rem var(--mono); }
.chart-facts dd { margin: 4px 0 0; color: var(--paper); }
.score-bars { display: grid; gap: 8px; margin: 18px 0; }
.score-bars div { display: grid; grid-template-columns: 72px minmax(0,1fr) 24px; gap: 10px; align-items: center; }
.score-bars span,.score-bars b { font: .7rem var(--mono); }
.score-bars i { height: 8px; background: linear-gradient(90deg,var(--red) calc(var(--score) * 10%),#312d2a calc(var(--score) * 10%)); }
.result-rotate { min-height: 38px !important; background: transparent !important; color: var(--paper) !important; }
.result-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.result-boundary { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: #d5afa8; font-size: .78rem; line-height: 1.65; }
.result-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.inline-experience .result-actions button { min-height: 40px; padding: 8px 13px; background: transparent; color: var(--paper); }
.inline-experience .result-actions button:hover { background: var(--red); color: #fff; }
.result-actions span { color: var(--muted); font-size: .72rem; line-height: 1.5; }
.result-actions span.is-error { color: #e9b163; }
@media(max-width:820px){.inline-experience>header{grid-template-columns:1fr}.inline-experience>header .eyebrow{grid-column:auto}.inline-experience form{grid-template-columns:repeat(2,minmax(0,1fr))}.priority-row{grid-template-columns:1fr 1fr}.priority-row label:first-child{grid-column:1/-1}.inline-experience .split-form{grid-template-columns:1fr}.result-columns,.variable-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.inline-experience{width:calc(100% - 32px);margin-bottom:54px;padding:20px}.inline-experience form,.inline-experience .reflection-form{grid-template-columns:1fr}.priority-row{grid-template-columns:1fr}.priority-row label:first-child{grid-column:auto}.experience-field-wide,.reflection-form>button{grid-column:auto}.result-columns,.variable-grid,.branch-list,.chart-facts{grid-template-columns:1fr}}