/* Outer teaching UI uses TOOLS tokens. The .vp-* boundary has its own OS palette. */
*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--site-page); color:var(--site-text); font-family:"Noto Sans JP",system-ui,"Yu Gothic UI",sans-serif; line-height:1.75; }
button,input { font:inherit; }
a { color:var(--site-link); }
button,a,input,summary,[tabindex] { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--site-link); outline-offset:4px; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.5; }
h1,h2,h3,p { margin-top:0; }
.tool-heading__title:focus { outline:none; }
.ct-button { text-decoration:none; }
.ss-main { max-width:1380px; padding:0 0 3rem; margin:auto; }
#screen:not(.ss-experience-screen) { max-width:1120px; margin:auto; }
.ss-back { display:inline-block; padding:.4rem 0; margin-bottom:1rem; font-weight:700; text-decoration:none; }
.ss-eyebrow { display:block; font-size:.74rem; letter-spacing:.13em; font-weight:800; color:var(--site-link); }
.ss-intro { display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; align-items:center; padding:clamp(1.5rem,4vw,3rem); border-radius:2rem; background:var(--md-sys-color-surface-container); margin:2rem 0; overflow:hidden; }
.ss-intro h2 { font-size:clamp(1.8rem,4vw,3rem); letter-spacing:-.04em; line-height:1.4; margin:.6rem 0 1rem; }
.ss-intro p { color:var(--site-muted); }
.ss-intro-computer { padding:12px; background:#202e38; border-radius:16px; transform:rotate(-3deg); box-shadow:0 18px 28px var(--site-shadow); }
.ss-mini-top { color:#b4c8ce; font-size:10px; letter-spacing:4px; padding:0 3px 7px; }
.ss-mini-desktop { background:linear-gradient(135deg,#173d57,#708d83); min-height:195px; display:grid; place-items:center; padding:20px; }
.ss-mini-warning { display:flex; align-items:center; gap:18px; background:#fff9f2; color:#a43618; border-top:6px solid #af3d20; padding:24px; font-size:48px; font-weight:900; box-shadow:8px 8px 0 #172f3c66; }
.ss-mini-warning span { font-size:18px; line-height:1.7; }
.ss-mini-base { height:7px; }
.ss-modes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.ss-mode { display:flex; flex-direction:column; color:var(--site-text); background:var(--site-card); border:1px solid var(--site-line); padding:1.6rem; border-radius:1.5rem; text-decoration:none; transition:transform .2s,box-shadow .2s; }
.ss-mode:hover { transform:translateY(-4px); box-shadow:0 10px 24px var(--site-shadow); }
.ss-mode-main { background:var(--md-sys-color-primary-container); color:var(--md-sys-color-on-primary-container); border-color:transparent; }
.ss-mode-index { font-size:.68rem; font-weight:800; letter-spacing:.1em; opacity:.8; }
.ss-mode .material-symbols-outlined { font-size:2rem; margin:1.4rem 0 1rem; align-self:start; }
.ss-mode h2 { font-size:1.3rem; margin:0 0 .65rem; }
.ss-mode p { font-size:.9rem; margin-bottom:1.7rem; }
.ss-mode strong { margin-top:auto; font-size:.9rem; }
.ss-boundary { margin-top:2rem; }
.ss-effects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1.5rem; }
.ss-effects legend { padding:0 .5rem; font-weight:800; }
.ss-effect { display:flex; align-items:flex-start; gap:.9rem; min-height:76px; padding:1rem .25rem; border-bottom:1px solid var(--site-line); cursor:pointer; }
.ss-effect input { width:20px; height:20px; margin:5px 0 0; flex:none; accent-color:var(--site-link); }
.ss-effect small { display:block; color:var(--site-muted); font-size:.78rem; font-weight:400; }
.ss-safety { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.7rem; align-items:center; position:sticky; top:calc(var(--site-header-height,64px) + .5rem); z-index:15; background:var(--site-card); border:2px solid var(--site-link); border-radius:1rem; padding:.7rem 1rem; margin-bottom:.8rem; box-shadow:0 4px 16px var(--site-shadow); }
.ss-safety strong { display:block; font-size:.9rem; color:var(--site-link); }
.ss-safety span { display:block; font-size:.72rem; color:var(--site-muted); }
.ss-safety-actions { display:flex; flex-wrap:wrap; gap:.4rem; }
.ss-safety-actions .ct-button { font-size:.8rem; padding:.45rem .8rem; }
.ss-safety [data-action="abort"] { color:var(--md-sys-color-on-primary); background:var(--md-sys-color-primary); border-color:transparent; }
.ss-pc-shell { position:relative; border-radius:1rem; overflow:hidden; border:5px solid #263746; background:#122d45; }
.ss-pause { position:absolute; inset:0; z-index:12; background:#102235f2; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:1.5rem; text-align:center; }
.ss-pause strong { font-size:1.5rem; }
.ss-pc-caption { text-align:center; font-size:.75rem; color:var(--site-muted); margin:.8rem 0; }
.ss-start-cover { position:absolute; inset:0; display:grid; place-items:center; padding:1.5rem; z-index:20; background:#122c4ccc; backdrop-filter:blur(7px); }
.ss-start-cover>div { width:min(620px,100%); padding:clamp(1.25rem,4vw,2.5rem); border-radius:1.5rem; background:var(--site-card); color:var(--site-text); box-shadow:0 15px 50px #001b3e66; }
.ss-start-cover h1 { font-size:clamp(1.4rem,2.7vw,2rem); line-height:1.5; margin:.6rem 0 1rem; }
.ss-start-cover p { font-size:.9rem; }
.ss-lab-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; align-items:start; gap:1.25rem; }
.ss-lab-machine { position:sticky; top:calc(var(--site-header-height,64px) + .5rem); min-width:0; }
.ss-lab-machine .vp-desktop { height:clamp(460px,61vh,680px); }
.ss-lab-sidebar { min-width:0; }
.ss-lab-sidebar>.ct-panel:first-child { margin-top:0; }
.ss-lab-sidebar .ct-panel { padding:1.2rem; }
.ss-lab-sidebar .ss-effect { min-height:60px; gap:.7rem; padding:.7rem 0; }
.ss-lab-sidebar .ss-effect strong { font-size:.82rem; }
.ss-lab-sidebar .ss-effect small { font-size:.7rem; }
.ss-lab-effects summary { cursor:pointer; font-weight:800; }
.ss-lab-effects fieldset { min-width:0; padding:0; border:0; margin:0; }
.ss-lab-feedback { padding:1rem; border-left:3px solid var(--site-link); background:var(--md-sys-color-surface-container); border-radius:0 .8rem .8rem 0; font-size:.85rem; }
.ss-lab-safety { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; padding:.55rem .7rem; margin-bottom:.5rem; border:1px solid var(--site-line-strong); border-radius:.7rem; background:var(--site-card); }
.ss-lab-safety strong { color:var(--site-link); font-size:.73rem; }
.ss-lab-safety>div { display:flex; gap:.5rem; }
.ss-lab-safety .ct-button { min-height:36px; padding:.35rem .7rem; font-size:.7rem; }
.ss-pipeline { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.4rem; margin:.8rem 0; }
.ss-pipeline>span { display:flex; align-items:center; gap:.4rem; padding:.5rem; border:1px solid var(--site-line); border-radius:.5rem; color:var(--site-muted); font-size:.65rem; }
.ss-pipeline b { display:grid; place-items:center; min-width:20px; height:20px; border:1px solid var(--site-line-strong); border-radius:50%; }
.ss-pipeline .is-current { background:var(--md-sys-color-primary-container); color:var(--md-sys-color-on-primary-container); border-color:var(--site-link); animation:ss-appear .35s ease; }
.ss-pipeline .is-past { opacity:.7; }
.ss-pipeline-detail { grid-column:1/-1; border-radius:.7rem; background:var(--md-sys-color-surface-container); padding:.8rem 1rem; font-size:.8rem; animation:ss-appear .35s ease; }
.ss-pipeline-detail p { margin:.3rem 0 0; font-size:.72rem; color:var(--site-muted); }
#guide-pc .vp-desktop { height:480px; }
@media(max-width:1000px) {
    .ss-lab-layout { grid-template-columns:minmax(0,1fr); }
    .ss-lab-machine { z-index:5; top:var(--site-header-height,64px); background:var(--site-page); padding-top:.4rem; }
    .ss-lab-machine .vp-desktop { height:380px; }
    .ss-lab-machine>.ct-actions { margin:.4rem 0; }
    .ss-lab-sidebar { padding-top:1rem; }
    .ss-lab-sidebar .ss-lab-effects { max-height:none; }
}
@media(max-width:550px) {
    .ss-lab-machine .vp-desktop { height:330px; }
    .ss-lab-machine .ss-lab-safety>div { width:100%; }
    .ss-lab-machine>.ct-actions .ct-button { min-height:38px; font-size:.72rem; padding:.45rem .7rem; }
    .ss-pipeline { gap:.2rem; margin:.35rem 0; }
    .ss-pipeline>span { padding:.3rem; font-size:.55rem; gap:.25rem; }
    .ss-pipeline b { min-width:15px; height:15px; font-size:.55rem; }
    .ss-pipeline-detail { padding:.5rem; }
    .ss-pipeline-detail strong { font-size:.68rem; }
    .ss-pipeline-detail p { font-size:.62rem; }
    .ss-start-cover { padding:.8rem; }
    .ss-start-cover .ct-actions { flex-direction:column; }
    #guide-pc .vp-desktop { height:480px; }
}
.ss-hints details { margin:.8rem 0; }
.ss-hints summary { cursor:pointer; padding:.4rem; font-weight:700; }
.ss-result-banner { background:var(--md-sys-color-primary-container); color:var(--md-sys-color-on-primary-container); border-radius:1.4rem; padding:1.6rem; display:flex; gap:1.2rem; align-items:flex-start; }
.ss-result-banner>.material-symbols-outlined { font-size:2.5rem; }
.ss-result-banner p { margin:.4rem 0 0; font-size:.86rem; }
.ss-result-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.ss-history { max-height:28rem; overflow:auto; padding-left:1.6rem; }
.ss-history li { padding:.65rem .25rem; border-bottom:1px solid var(--site-line); }
.ss-history-kind { display:inline-block; font-size:.72rem; color:var(--site-muted); margin-right:.8rem; border:1px solid var(--site-line-strong); border-radius:.3rem; padding:.1rem .4rem; }
.ss-step-nav { list-style:none; padding:0; margin:1.4rem 0; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:.5rem; }
.ss-step-nav a { display:flex; align-items:center; flex-direction:column; gap:.5rem; text-align:center; text-decoration:none; padding:.6rem .2rem; font-size:.68rem; border-radius:.8rem; color:var(--site-muted); }
.ss-step-nav b { display:grid; place-items:center; border:1px solid var(--site-line-strong); border-radius:50%; width:32px; height:32px; font-size:.85rem; }
.ss-step-nav [aria-current] { background:var(--md-sys-color-primary-container); color:var(--md-sys-color-on-primary-container); }
.ss-step-nav [aria-current] b { background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); border-color:transparent; }
.ss-topic-nav { display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0; }
.ss-topic-nav a { padding:.7rem 1rem; border:1px solid var(--site-line); border-radius:999px; text-decoration:none; color:var(--site-text); font-size:.85rem; font-weight:700; }
.ss-topic-nav [aria-current] { background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); }
.ss-hotspot-warning { max-width:670px; margin:1rem auto; background:#eef2f7; color:#213442; border:1px solid #758b9b; border-top:7px solid #a93725; padding:1.4rem; border-radius:.5rem; box-shadow:7px 7px 0 var(--site-shadow); }
.ss-hotspot-warning small { color:#a22f1e; }
.ss-hotspot-warning button { display:block; width:100%; background:#fff; color:#213442; border:2px solid transparent; padding:1rem; margin:.5rem 0; text-align:left; border-radius:.4rem; font-weight:700; }
.ss-hotspot-warning button:nth-of-type(3) { color:#ac2b22; }
.ss-hotspot-warning button.is-found { border-color:#316453; background:#e2f1e7; }
.ss-found { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.ss-question-stack article { padding:1.5rem 0; border-bottom:1px solid var(--site-line); }
.ss-quiz-choices { display:grid; gap:.6rem; justify-items:start; }
.ss-quiz-choices .ct-button { text-align:left; justify-content:flex-start; border-radius:.8rem; }
[aria-pressed="true"].ct-button { background:var(--md-sys-color-primary-container); color:var(--md-sys-color-on-primary-container); border-color:var(--site-link); }
.ss-tech-list details { border-bottom:1px solid var(--site-line); padding:1rem 0; }
.ss-tech-list summary { cursor:pointer; font-weight:800; padding:.5rem 0; }
.ss-compare { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
.ss-compare p { background:var(--md-sys-color-surface-container); padding:1rem; border-radius:.7rem; }
.ss-compare strong { display:block; color:var(--site-link); font-size:.8rem; }
.ss-help-path { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1rem 0; }
.ss-help-path article { border-left:3px solid var(--site-link); padding:1rem; background:var(--md-sys-color-surface-container); border-radius:0 .8rem .8rem 0; }
.ss-help-path p { font-size:.9rem; margin:.6rem 0 0; }
@keyframes ss-appear { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes ss-pulse { 50% { opacity:.55; } }
@keyframes ss-travel { 50% { transform:translateX(8px); } }
@media(max-width:850px) {
    .ss-modes { grid-template-columns:1fr; }
    .ss-mode { display:grid; grid-template-columns:1fr auto; gap:.4rem 1rem; }
    .ss-mode-index,.ss-mode h2,.ss-mode p,.ss-mode strong { grid-column:1; margin:0; }
    .ss-mode .material-symbols-outlined { grid-column:2; grid-row:1/4; margin:0; }
    .ss-mode strong { margin-top:.8rem; }
    .ss-step-nav { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:550px) {
    .ss-main { padding:0 0 2rem; }
    .minimal-site-header,.minimal-site-footer { --minimal-shell-padding-inline:.75rem; }
    .minimal-site-brand { font-size:.62rem; padding:0 .25rem; }
    .minimal-site-tool { font-size:.7rem; padding:0 .25rem; }
    .ss-intro { grid-template-columns:1fr; gap:1.5rem; padding:1.4rem; }
    .ss-intro-computer { max-width:320px; width:100%; margin:auto; }
    .ss-mini-desktop { min-height:140px; }
    .ss-mini-warning { padding:15px; }
    .ss-effects,.ss-result-grid,.ss-found,.ss-compare,.ss-help-path { grid-template-columns:1fr; }
    .ss-safety { padding:.6rem; gap:.5rem; border-radius:.7rem; }
    .ss-safety-actions { gap:.3rem; }
    .ss-safety-actions .ct-button { min-height:40px; font-size:.72rem; padding:.4rem .6rem; }
    .ss-safety span { font-size:.62rem; }
    .ss-pc-shell { border-width:2px; border-radius:.6rem; }
    .ss-hotspot-warning { padding:1rem; }
    .ss-hotspot-warning button { padding:.8rem; font-size:.85rem; }
    .ss-escape-visual { padding:1rem; }
    .ss-escape-fake { margin:15px; padding:15px; font-size:.8rem; }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}