
#cok-matrix{--ink:#17385b;--blue:#1686c1;--mint:#d7f3ef;--paper:#fffefb;--line:#d7e5ec;color:var(--ink);background:#edf8fc;font-family:'Segoe UI',Arial,sans-serif;font-size:16px;line-height:1.55;border-radius:26px;overflow:hidden;isolation:isolate}
#cok-matrix *{box-sizing:border-box}#cok-matrix button,#cok-matrix select,#cok-matrix input{font:inherit}#cok-matrix button,#cok-matrix select{color:var(--ink);background:#fffefb;border:1px solid #c0d7e1;border-radius:12px;padding:9px 14px;cursor:pointer;min-height:44px}#cok-matrix button:hover{background:#e4f5f8}#cok-matrix button[aria-pressed=true]{background:#17385b;color:#fffefb;border-color:#17385b}#cok-matrix button:disabled{opacity:.45;cursor:default}#cok-matrix a{color:#126894;text-decoration:underline;text-underline-offset:3px}#cok-matrix h1,#cok-matrix h2,#cok-matrix h3,#cok-matrix p{margin:0}#cok-matrix h1{font-size:clamp(28px,4.2vw,46px);line-height:1.08;letter-spacing:-1.5px;font-weight:650}#cok-matrix h2{font-size:24px;line-height:1.25;font-weight:600}#cok-matrix h3{font-size:16px;font-weight:650}#cok-matrix .eyebrow{font-size:12px;font-weight:650;letter-spacing:1.8px;text-transform:uppercase;color:#45627a}#cok-matrix .hero{display:grid;grid-template-columns:1fr 210px;gap:24px;padding:34px 34px 24px;background:linear-gradient(125deg,#e5f6fc,#d7f3ef);align-items:center}#cok-matrix .hero h1{margin:12px 0}#cok-matrix .hero p{max-width:550px}#cok-matrix .hero img{width:100%;height:auto;display:block;border-radius:30px}#cok-matrix .brand{font-weight:750;font-size:25px;margin-right:14px;letter-spacing:-1px}#cok-matrix .brandline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}#cok-matrix .slogan{font-size:12px;max-width:235px;color:#45627a}#cok-matrix .nav{padding:14px 32px;display:flex;gap:8px;flex-wrap:wrap;background:#fffefb;border-bottom:1px solid var(--line)}#cok-matrix .body{padding:26px 32px 32px}#cok-matrix .subhead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:16px}#cok-matrix .meta{font-size:13px;color:#48627b}#cok-matrix .axes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:16px 0 4px}#cok-matrix .axis{border-top:3px solid #9ab5c8;padding-top:8px;font-size:13px}#cok-matrix .axis strong{display:block;font-size:14px}#cok-matrix .controls{display:flex;align-items:end;gap:18px;flex-wrap:wrap;margin:18px 0 8px}#cok-matrix label{display:grid;gap:6px;font-size:13px;font-weight:600}#cok-matrix select{max-width:100%;font-size:15px}#cok-matrix input[type=range]{accent-color:#1686c1;width:180px;min-height:30px}#cok-matrix .stage{position:relative;width:100%;height:430px;overflow:hidden}#cok-matrix .stage svg{display:block;width:100%;height:100%;overflow:visible}#cok-matrix .point{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;min-height:34px;padding:0;border:0;background:transparent;color:transparent;border-radius:50%;cursor:pointer}#cok-matrix .point:hover{background:#17385b18}#cok-matrix .point[aria-pressed=true]{background:transparent;border:2px solid #17385b;color:transparent}#cok-matrix .point:focus-visible{outline:3px solid #17385b;outline-offset:3px}#cok-matrix .legend{display:flex;gap:8px 18px;flex-wrap:wrap;font-size:12px;color:#36536b;padding:12px 0 18px;border-bottom:1px solid var(--line)}#cok-matrix .swatch{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}#cok-matrix .selector{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;margin:22px 0}#cok-matrix .selector select{width:100%}#cok-matrix .step{display:flex;gap:8px}#cok-matrix .sheet{background:#fffefb;border-radius:22px;padding:26px}#cok-matrix .sheethead{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start;border-bottom:1px solid var(--line);padding-bottom:20px}#cok-matrix .sceneid{color:#187eb1;font-size:14px;font-weight:700;letter-spacing:2px}#cok-matrix .sheet h2{margin:5px 0 8px}#cok-matrix .weight{padding:8px 12px;background:#e6f4f4;border-radius:12px;max-width:180px;font-size:13px}#cok-matrix .block{padding:20px 0;border-bottom:1px solid var(--line)}#cok-matrix .block:last-child{border-bottom:0;padding-bottom:0}#cok-matrix .block h3{margin-bottom:8px}#cok-matrix .block p{font-size:15px}#cok-matrix .choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;list-style:none;margin:12px 0 0;padding:0}#cok-matrix .choices li{padding:12px;background:#f1f7fa;border-radius:12px;font-size:14px}#cok-matrix .twocol{display:grid;grid-template-columns:1fr 1fr;gap:24px}#cok-matrix .interpretations{padding-left:22px;margin:0;font-size:15px}#cok-matrix .interpretations li+li{margin-top:9px}#cok-matrix .toudou{background:#e8f6f4;border-radius:15px;padding:18px;margin:20px 0 0}#cok-matrix .toudou h3{margin-bottom:6px}#cok-matrix .toudou p{font-size:15px}#cok-matrix .smallnote{font-size:12px;color:#48627b;margin-top:16px}#cok-matrix .rule{margin:18px 0 0;padding:14px 0;border-top:1px solid var(--line);font-size:13px;color:#48627b}#cok-matrix .guide{background:#fffefb;border-radius:22px;padding:26px}#cok-matrix .guide summary{cursor:pointer;font-size:18px;font-weight:600;padding:18px 0}#cok-matrix .guide details{border-bottom:1px solid var(--line)}#cok-matrix .guide details:last-child{border-bottom:0}#cok-matrix .guide p{margin:12px 0;font-size:15px}#cok-matrix .guide h3{margin:20px 0 10px}#cok-matrix .guide ul,#cok-matrix .guide ol{padding-left:24px;font-size:15px}#cok-matrix .guide li{margin:9px 0}#cok-matrix .tablewrap{overflow-x:auto;margin:16px 0}#cok-matrix table{border-collapse:collapse;width:100%;font-size:14px}#cok-matrix th,#cok-matrix td{text-align:left;vertical-align:top;padding:12px;border-bottom:1px solid var(--line)}#cok-matrix th{background:#e8f6f4}#cok-matrix .all-scene{margin:20px 0;break-before:page}#cok-matrix .all-scene .sheethead{scroll-margin-top:20px}#cok-matrix [hidden]{display:none!important}#cok-matrix .footer{padding:18px 32px;background:#d7f3ef;font-size:12px;color:#36536b}#cok-matrix .only-small{display:none}#cok-matrix .fulltop{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
@media(max-width:650px){#cok-matrix .hero{grid-template-columns:1fr 120px;padding:24px 18px;gap:12px}#cok-matrix .hero h1{font-size:31px}#cok-matrix .hero .intro{grid-column:1/-1}#cok-matrix .nav{padding:12px 18px}#cok-matrix .body{padding:20px 16px}#cok-matrix .axes{grid-template-columns:1fr;gap:10px}#cok-matrix .stage{height:320px}#cok-matrix .point-layer{display:none}#cok-matrix .only-small{display:block}#cok-matrix .sheet,#cok-matrix .guide{padding:18px}#cok-matrix .twocol,#cok-matrix .choices{grid-template-columns:1fr;gap:14px}#cok-matrix .sheethead{grid-template-columns:1fr}#cok-matrix .selector{grid-template-columns:1fr}#cok-matrix h2{font-size:22px}#cok-matrix .footer{padding:18px}#cok-matrix .controls{gap:12px}#cok-matrix .hero p{font-size:14px}}
@media(max-width:400px){#cok-matrix .hero{grid-template-columns:1fr 90px}#cok-matrix .hero h1{font-size:28px}}
@media print{#cok-matrix{background:white;border-radius:0;color:#17385b}#cok-matrix .hero,#cok-matrix .nav,#cok-matrix .footer,#cok-matrix #explore-panel,#cok-matrix #guide-panel,#cok-matrix .fulltop{display:none!important}#cok-matrix #full-panel{display:block!important}#cok-matrix .body{padding:0}#cok-matrix .sheet{padding:0}#cok-matrix .block,#cok-matrix .toudou{break-inside:avoid}#cok-matrix .all-scene{break-before:page}#cok-matrix .twocol{display:block}}

/* Integration into the existing C'OK screen system. */
.topbar .matrix-nav-link{margin-left:auto;margin-right:18px;border:1px solid #a4d3e4;border-radius:12px;background:#edf8fc;color:#0875ba;font:600 14px 'Manrope',sans-serif;padding:10px 16px;min-height:44px;cursor:pointer;white-space:nowrap}
.topbar .matrix-nav-link[aria-current="page"]{background:#0875ba;color:white}
.matrix-screen{padding:0;background:#edf8fc}
#cok-matrix{border-radius:0;font-family:'Manrope','Segoe UI',sans-serif;--ink:#08294d;--blue:#0875ba}
#cok-matrix .matrix-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 32px 18px;background:linear-gradient(125deg,#e5f6fc,#d7f3ef)}
#cok-matrix .matrix-heading h1{font-size:32px;letter-spacing:-.8px;margin:8px 0;line-height:1.2}
#cok-matrix .matrix-heading p:not(.eyebrow){font-size:16px;max-width:760px}
#cok-matrix .matrix-heading img{width:90px;height:100px;object-fit:contain;flex:none}
#cok-matrix .matrix-return{display:flex;gap:10px;flex-wrap:wrap;padding:16px 32px 0}
#cok-matrix .matrix-return button{font-size:14px;min-height:44px}
#cok-matrix .block p,#cok-matrix .interpretations,#cok-matrix .toudou p,#cok-matrix .guide p,#cok-matrix .guide li{font-size:16px}
#cok-matrix .meta,#cok-matrix label,#cok-matrix .axis,#cok-matrix .weight,#cok-matrix .legend{font-size:14px}
#cok-matrix button{font-family:inherit}
.matrix-mission-access{margin-top:16px;padding:14px 18px;border:1px solid #abd8e6;border-radius:16px;background:#f4fcff;color:#0875ba;font:600 15px 'Manrope',sans-serif;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:44px}
.matrix-mission-access small{font-size:12px;font-weight:400;color:#547084}
@media(max-width:650px){.topbar{flex-wrap:wrap;height:auto;gap:10px}.topbar .matrix-nav-link{margin-left:auto;margin-right:0;padding:8px 12px}.topbar .brand{max-width:calc(100% - 64px)}.topbar .profile{order:0}.topbar .matrix-nav-link{order:1}#cok-matrix .matrix-heading{padding:18px 16px;gap:10px}#cok-matrix .matrix-heading h1{font-size:26px}#cok-matrix .matrix-heading img{width:62px;height:78px}#cok-matrix .matrix-return{padding:14px 16px 0}#cok-matrix .matrix-heading .eyebrow{font-size:12px}}
@media print{.topbar,#cok-matrix .matrix-heading,#cok-matrix .matrix-return{display:none!important}.app-shell{box-shadow:none;margin:0;max-width:none}.matrix-screen{padding:0}}

.app-shell .topbar .matrix-nav-link{margin-left:0;margin-right:0;order:0}@media(max-width:650px){.app-shell .topbar{gap:7px;flex-wrap:nowrap}.app-shell .topbar .brand{max-width:none;flex-shrink:0}.app-shell .topbar .brand span{display:none}.app-shell .topbar .matrix-nav-link{font-size:12px;padding:10px}.app-shell .topbar .profile{flex-shrink:0}}
