@import url("./tokens.css");
@import url("./components.css");
*{box-sizing:border-box}html{scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:var(--font-size-body);line-height:var(--line-height-body);word-break:keep-all}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.skip-link{position:fixed;top:-80px;left:16px;background:var(--color-surface);padding:12px;z-index:10}.skip-link:focus{top:10px}
.site-header,main,footer{max-width:var(--content-width);margin:auto;padding-left:40px;padding-right:40px}.site-header{min-height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:19px;font-weight:700}.site-header nav{display:flex;gap:28px;font-size:13px}.page-heading{padding:44px 0 28px;display:flex;align-items:baseline;gap:24px}.page-heading h1{font-size:26px;margin:0;font-weight:600;letter-spacing:-1px}.page-heading p{color:var(--muted);margin:0;font-size:13px}
.diagram-nav{display:flex;gap:7px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--line)}.diagram-nav button{border-color:transparent;background:transparent;padding:8px 14px;font-size:13px}.diagram-nav button[aria-current="true"]{background:var(--ink);color:var(--color-surface)}.diagram-heading{min-height:146px;padding:26px 0 22px;display:flex;align-items:center;justify-content:space-between;gap:24px}.diagram-meta{font-size:11px;color:var(--muted);margin:0 0 5px;letter-spacing:.4px}.diagram-heading h2{font-size:21px;font-weight:600;margin:0 0 7px;letter-spacing:-.5px}.diagram-heading>div>p:last-child{font-size:13px;color:var(--muted);margin:0;max-width:900px}.pagination{display:flex;align-items:center;gap:12px;flex-shrink:0}.pagination span{font-size:12px;color:var(--muted);min-width:35px;text-align:center}.pagination button{padding:5px 11px}
.diagram-shell{position:relative;border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;background:var(--canvas)}.toolbar{min-height:54px;display:flex;align-items:center;gap:5px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--color-surface)}.toolbar button{font-size:12px;padding:5px 10px}.toolbar output{font-size:11px;min-width:48px;text-align:center;color:var(--muted)}.toolbar-divider{height:20px;border-left:1px solid var(--line);margin:0 7px}.diagram-canvas{height:620px;width:100%;touch-action:none}.diagram-canvas canvas{display:block}.canvas-caption{display:flex;justify-content:space-between;gap:16px;padding:10px 14px;color:var(--muted);font-size:11px;border-top:1px solid var(--line);background:var(--color-surface)}[data-ui="engine-status"]{padding:20px;color:var(--muted)}
.selection-panel{display:grid;grid-template-columns:100px 1fr auto;align-items:start;gap:18px;padding:20px 0;min-height:89px;border-bottom:1px solid var(--line);font-size:13px}.selection-label{color:var(--muted);font-size:12px;margin:1px 0}#selection-content{overflow-wrap:anywhere}#selection-content strong{display:block;font-size:14px;margin-bottom:7px}#selection-content p{margin:4px 0;color:var(--muted)}#selection-content .relation-tag{color:var(--ink);display:inline-block;min-width:62px}.selection-panel button{font-size:11px}
.text-view{margin-top:18px;font-size:12px}.text-view summary{cursor:pointer;width:fit-content}.text-view>p{color:var(--muted)}#node-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none;padding:0}#node-list button{width:100%;text-align:left;font-size:12px}#node-list button[aria-pressed="true"]{border-color:var(--accent);background:var(--color-surface-hover)}
.simple-section{padding:54px 0;border-top:1px solid var(--line);margin-top:55px}.simple-section h2{font-size:20px;margin:0 0 26px;font-weight:600}.simple-section h3{font-size:14px;font-weight:500;margin:0 0 12px}.pr-columns{display:grid;grid-template-columns:1fr 1fr;gap:30px}.muted{color:var(--muted);font-size:13px}.company-info{margin:0}.company-info>div{display:grid;grid-template-columns:145px 1fr;gap:20px;margin:13px 0;font-size:13px}.company-info dt{color:var(--muted)}.company-info dd{margin:0}footer{padding-top:24px;padding-bottom:30px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}
@media(max-width:760px){.site-header,main,footer{padding-left:18px;padding-right:18px}.site-header{min-height:66px}.site-header nav{gap:18px;font-size:12px}.page-heading{padding:30px 0 22px;display:block}.page-heading h1{font-size:23px}.page-heading p{margin-top:6px}.diagram-nav{gap:3px}.diagram-nav button{padding:7px 10px;font-size:12px}.diagram-heading{align-items:flex-start;min-height:155px;gap:12px}.diagram-heading h2{font-size:19px}.diagram-heading>div>p:last-child{font-size:12px}.pagination{gap:6px}.pagination button{padding:4px 8px}.pagination span{font-size:11px;min-width:28px}.diagram-canvas{height:470px}.toolbar{padding:9px;gap:4px}.toolbar button{font-size:11px;padding:5px 8px}.canvas-caption{font-size:10px;padding:9px;display:block}.canvas-caption>span{display:block}.canvas-caption>span+span{margin-top:3px}.selection-panel{grid-template-columns:1fr auto;gap:8px}.selection-label{grid-column:1/-1}.selection-panel button{padding:5px 8px}#node-list{grid-template-columns:1fr 1fr}.simple-section{margin-top:36px;padding:36px 0}.company-info>div{grid-template-columns:100px 1fr;gap:12px;font-size:12px}}

.structure-key{font-size:12px;line-height:1.9;color:var(--muted);margin:0 0 18px}.diagram-canvas{cursor:grab}.diagram-canvas:active{cursor:grabbing}

.diagram-nav{gap:16px 24px}.nav-caption{display:block;font-size:10px;color:var(--muted);margin-bottom:8px}.nav-buttons{display:flex;gap:3px;flex-wrap:wrap}.nav-group{border-right:1px solid var(--line);padding-right:20px}.nav-group:last-child{border:0;padding:0}@media(max-width:760px){.diagram-nav{gap:16px}.nav-group{border:0;padding:0}.nav-caption{font-size:10px}.page-heading p{font-size:12px}}

.story-panel{border:1px solid var(--line);border-radius:var(--radius-card);margin:0 0 14px;background:var(--color-surface);padding:14px 16px}.story-top{display:flex;align-items:center;gap:16px}.story-badge{font-size:12px;color:var(--accent)}[data-ui="story-progress"]{font-size:11px;color:var(--muted)}.story-controls{margin-left:auto;display:flex;gap:6px}.story-controls button{font-size:12px;padding:5px 12px}[data-ui="play-story"]{background:var(--accent);color:white;border-color:var(--accent)}.dialogue{font-size:14px;min-height:32px;padding-top:12px}.dialogue strong{font-size:12px;color:var(--accent);font-weight:500}.technology-ending{padding:24px;border:1px solid var(--accent);border-radius:var(--radius-card);margin-top:16px}.technology-ending>p{font-size:12px;color:var(--muted);margin:0 0 12px}.technology-ending ol{margin:0;padding-left:22px}.technology-ending li{padding:5px 0;font-size:13px;color:var(--muted)}.technology-ending li.current{font-weight:600;color:var(--accent)}@media(max-width:760px){.story-panel{padding:12px}.dialogue{font-size:12px}.story-top{gap:8px}.story-controls button{font-size:11px;padding:5px 8px}.story-badge{font-size:11px}.technology-ending{padding:16px}.technology-ending li{font-size:12px}}

@media(max-width:760px){.diagram-canvas{height:360px}}
/* English captions remain fixed inside the game viewport while the world moves. */
.canvas-viewport{position:relative;isolation:isolate}
.canvas-subtitle{position:absolute;left:20px;right:20px;bottom:16px;z-index:2;pointer-events:none;display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;padding:13px 22px;border-radius:6px;background:var(--color-caption-surface);box-shadow:var(--shadow-caption);color:var(--color-text);font-size:15px;line-height:1.55;word-break:keep-all;overflow-wrap:break-word;max-width:760px;margin:0 auto}
.canvas-subtitle strong{font-size:10px;letter-spacing:1.4px;color:var(--color-text-brand);font-weight:600}
.story-panel{padding:10px 14px}
@media(max-width:760px){.canvas-subtitle{left:9px;right:9px;bottom:10px;padding:10px 12px;font-size:12px;line-height:1.5}.canvas-subtitle strong{font-size:9px}}

.toolbar .icon-button{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:5px}.toolbar-progress{margin-left:auto;font-size:10px;color:var(--muted);white-space:nowrap}.toolbar{flex-wrap:wrap}
/* Header follows the supplied planning guide. */
.guide-header{display:flex;align-items:center;gap:14px;padding:30px 0 12px;border-bottom:1px solid var(--color-text)}.guide-header a{display:flex;flex-shrink:0}.guide-header h1{font-size:20px;line-height:1.5;font-weight:400;margin:0;letter-spacing:0}.guide-description{font-size:18px;line-height:1.6;margin:24px 0 30px;color:var(--ink)}.diagram-pager{display:flex;align-items:center;gap:8px;margin-left:10px}.diagram-pager span{font-size:10px;color:var(--muted);white-space:nowrap}.diagram-pager button{padding:4px 8px}.toolbar-progress{margin-left:auto}@media(max-width:760px){.guide-header{padding-top:24px;gap:10px}.guide-header h1{font-size:17px}.guide-header svg{width:28px;height:28px}.guide-description{font-size:15px;margin:20px 0 24px}.diagram-pager{margin-left:auto}}
.diagram-section{padding-bottom:48px}.diagram-section+.diagram-section{padding-top:24px;border-top:1px solid var(--line)}.diagram-section-title{font-size:20px;line-height:1.5;font-weight:400;margin:14px 0 22px}.diagram-section .toolbar-progress{margin-left:auto}@media(max-width:760px){.diagram-section{padding-bottom:32px}.diagram-section+.diagram-section{padding-top:18px}.diagram-section-title{font-size:17px;margin:8px 0 18px}}

/* Persistent technology classification, separate from playback progress. */
.diagram-section .toolbar-progress{margin-left:8px}
.toolbar-technology{margin-left:auto;text-align:right;font-size:12px;line-height:1.5;color:var(--accent);font-weight:500}
@media(max-width:520px){.toolbar-technology{flex-basis:100%;padding-top:3px;font-size:11px}}
/* Product readiness sits immediately below its title. */
.diagram-section-title.has-readiness{margin-bottom:6px}
.diagram-readiness{margin:0 0 20px;font-size:12px;line-height:1.5;color:var(--muted)}
@media(max-width:760px){.diagram-readiness{font-size:11px;margin-bottom:16px}}
/* Inquiry form: company.html fields and submission route. */
#contact-dialog{width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 32px);box-sizing:border-box;overflow:auto;border:1px solid var(--color-border);border-radius:var(--radius-dialog);padding:24px;color:var(--color-text);background:var(--color-surface)}
#contact-dialog::backdrop{background:var(--color-overlay)}
.contact-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.contact-header h2{margin:0;font-size:20px}
.contact-header button{font-size:24px;line-height:1;padding:5px 9px}
#contact-form{display:flex;flex-direction:column;gap:8px}
#contact-form label{font-size:13px;margin-top:8px}
#contact-form input,#contact-form textarea{box-sizing:border-box;width:100%;border:1px solid var(--color-border-input);border-radius:var(--radius-control);background:var(--color-surface);color:inherit;font:inherit;padding:10px 12px}
#contact-form textarea{resize:vertical;min-height:100px}
#contact-status{font-size:13px;line-height:1.6;margin:8px 0;word-break:keep-all}
#contact-status:empty{display:none}
.contact-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.contact-actions [type=submit]{background:var(--color-action);color:var(--color-surface);border-color:var(--color-action)}
#contact-dialog button:disabled{opacity:.6}
body:has(#contact-dialog[open]){overflow:hidden}

/* Local press archive reader. */
.press-card{display:flex;width:100%;gap:20px;padding:0;border:0;background:transparent;text-align:left;color:inherit;align-items:flex-start;white-space:normal}
.press-card img{width:140px;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-control)}
.press-card-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:12px}
.press-card strong{font-size:17px;line-height:1.6;word-break:keep-all}
.press-meta,.press-read{font-size:12px;color:var(--color-text-brand)}
.press-card:hover strong{text-decoration:underline;text-underline-offset:4px}
#press-dialog{--text:var(--color-text);--text-muted:var(--color-text-muted);--coral:var(--color-action);--surface:var(--color-surface);--border-sand:var(--color-border);--border:var(--color-border);width:min(860px,calc(100% - 32px));max-height:calc(100dvh - 40px);box-sizing:border-box;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-dialog);overflow:auto;color:var(--text);background:var(--color-surface);overscroll-behavior:contain}
#press-dialog::backdrop{background:var(--color-overlay)}
.press-controls{position:sticky;top:0;z-index:1;background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;padding:12px 24px;font-size:13px}
.press-reader{padding:28px 40px 40px}
#press-dialog .article-header{border-bottom:1px solid var(--color-border);padding-bottom:24px;margin-bottom:28px}
#press-dialog .archive-tag{display:none}
#press-dialog .article-title{font-size:28px;line-height:1.5;word-break:keep-all;margin:0 0 18px}
#press-dialog .article-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--color-text-muted)}
.press-sources{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;font-size:12px}
.press-sources a{color:var(--color-action)}
#press-dialog .article-main-visual{margin:24px 0}
#press-dialog .article-main-visual img{display:block;width:100%;height:auto;border-radius:var(--radius-control)}
#press-dialog .visual-caption{font-size:12px;line-height:1.6;color:var(--color-text-muted);margin-top:10px}
#press-dialog .article-content{font-size:16px;line-height:1.85;word-break:keep-all;overflow-wrap:anywhere}
#press-dialog .article-content p{margin:0 0 24px}
#press-dialog .concept-diagram{margin:28px 0;padding:20px;background:var(--color-surface-subtle);border:1px solid var(--color-border);border-radius:var(--radius-card)}
#press-dialog .diagram-header{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;margin-bottom:14px}
#press-dialog .diagram-title{font-size:14px;font-weight:600}
#press-dialog .diagram-source{font-size:11px;color:var(--color-text-muted)}
#press-dialog .diagram-row{display:flex;align-items:center;gap:10px}
#press-dialog .diagram-node{flex:1;padding:12px;background:var(--color-surface);border:1px solid var(--color-border);text-align:center;font-size:13px}
#press-dialog .diagram-caption{margin-top:14px;font-size:13px;color:var(--color-text-muted)}
#press-dialog .flow-step{display:flex;gap:10px;padding:10px;font-size:13px}
body:has(#press-dialog[open]){overflow:hidden}
@media(max-width:600px){
.press-card{gap:14px}.press-card img{width:90px}.press-card strong{font-size:15px}
.press-reader{padding:20px}.press-controls{padding:10px 16px}
#press-dialog .article-title{font-size:21px}
#press-dialog .article-content{font-size:15px}
#press-dialog .diagram-row{flex-direction:column}
#press-dialog .diagram-node{box-sizing:border-box;width:100%}
#press-dialog .diagram-arrow{transform:rotate(90deg)}
#press-dialog .meta-separator{display:none}
}

.activity-slider figure{margin:0}
.activity-slider img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:var(--radius-card);background:var(--color-surface-subtle)}
.activity-slider figcaption{display:flex;flex-direction:column;gap:8px;margin-top:14px;line-height:1.6;word-break:keep-all}
.activity-slider figcaption strong{font-size:16px;font-weight:600}
#activity-controls:not([hidden]){display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:14px}
#activity-count{font-size:12px;color:var(--color-text-muted)}
@media(max-width:760px){.pr-columns{grid-template-columns:1fr;gap:32px}}
/* PR cards share the same image, metadata and title alignment. */
#pr .pr-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:start}
#pr .pr-columns>div{min-width:0}
#pr .pr-columns h3{margin:0 0 16px}
#pr .press-card{display:flex;flex-direction:column;gap:0;align-items:stretch;border-radius:0}
#pr .press-card:hover{background:transparent}
#pr .press-card img,#pr .activity-slider img{display:block;width:100%;height:auto;aspect-ratio:8/3;border-radius:var(--radius-card);background:var(--canvas)}
#pr .press-card img{object-fit:cover;object-position:center 42%}
#pr .activity-slider img{object-fit:contain}
#pr .press-card-copy,#pr .activity-slider figcaption{display:flex;flex-direction:column;gap:10px;margin:16px 0 0}
#pr .press-meta{font-size:12px;line-height:1.6}
#pr .press-card strong,#pr .activity-slider figcaption strong{font-size:17px;line-height:1.65;font-weight:600;letter-spacing:-.2px}
#pr .press-read{margin-top:2px}
@media(max-width:760px){
#pr .pr-columns{grid-template-columns:1fr;gap:36px}
#pr .press-card strong,#pr .activity-slider figcaption strong{font-size:16px}
#pr .press-card-copy,#pr .activity-slider figcaption{margin-top:12px}
}
#activity-image-next{display:block;width:100%;padding:0;border:0;border-radius:var(--radius-card);background:transparent;color:inherit;cursor:pointer}
#activity-image-next:disabled{cursor:default;opacity:1}
#activity-image-next:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.canvas-zoom{position:absolute;top:12px;right:12px;z-index:3;display:flex;flex-direction:column;gap:6px}
.canvas-zoom button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;font-size:24px;line-height:1;box-shadow:var(--shadow-control)}

.workshop-floating{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:5;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border:1px solid var(--accent);border-radius:var(--radius-pill);background:var(--accent);color:var(--color-surface);font-size:14px;font-weight:600;box-shadow:var(--shadow-floating);touch-action:manipulation}
.workshop-floating:hover{background:var(--color-action-hover)}

@media(max-width:760px){.workshop-floating{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:10px 18px}}

.contact-invitation{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.6}

.workshop-floating{text-align:center;line-height:1.4}

/* Keep language switching directly above the workshop link on every screen size. */
.floating-actions{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:5;display:flex;flex-direction:column;align-items:stretch;gap:8px;max-width:calc(100vw - 32px)}
.floating-actions .workshop-floating{position:static;min-height:48px;padding:10px 18px}
.language-floating{min-height:44px;border-radius:var(--radius-pill);background:var(--paper);border-color:var(--accent);color:var(--accent);font-size:13px;font-weight:600;box-shadow:var(--shadow-control)}
.language-floating:hover{background:var(--color-surface-hover)}
html[lang="en"] .canvas-subtitle{font-size:14px;line-height:1.45}
html[lang="en"] .company-info>div{grid-template-columns:155px minmax(0,1fr)}
html[lang="en"] .diagram-section-title{overflow-wrap:break-word}

@media(max-width:760px){.floating-actions{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}html[lang="en"] .canvas-subtitle{font-size:12px}html[lang="en"] .company-info>div{grid-template-columns:105px minmax(0,1fr)}}

/* Shared component sizing and layout tokens. */
.site-header,main,footer{padding-inline:var(--page-gutter)}
.toolbar .icon-button,.canvas-zoom button{min-width:var(--control-height);min-height:var(--control-height);height:var(--control-height)}
.canvas-zoom{z-index:var(--z-canvas-controls)}
.canvas-subtitle{z-index:var(--z-caption)}
.floating-actions{right:var(--floating-inset);bottom:calc(var(--floating-inset) + env(safe-area-inset-bottom,0px));gap:var(--floating-gap);z-index:var(--z-floating)}
.skip-link{z-index:var(--z-skip)}
.press-card,#activity-image-next{min-height:0}
#contact-form input,#contact-form textarea{min-height:var(--control-height-touch)}
#contact-dialog button:disabled{opacity:.45}
footer{padding-bottom:calc(var(--space-16) + 96px)}
@media(max-width:760px){.toolbar .icon-button,.canvas-zoom button{min-width:var(--control-height-touch);min-height:var(--control-height-touch);height:var(--control-height-touch)}}