:root{--color-bg:var(--color-background);--color-surface-subtle:var(--color-surface-strong);--color-divider:var(--kj-divider);--color-primary:var(--color-accent);--color-on-primary:var(--color-on-accent);--color-focus:var(--color-text);--color-error:var(--color-danger);--color-info:var(--color-accent);--color-success-surface:var(--kj-success-soft);--color-success-border:var(--color-success);--color-warning-surface:var(--kj-notice-bg);--color-warning-border:var(--color-warning);--color-error-surface:var(--kj-danger-soft);--color-error-border:var(--color-danger);--color-info-surface:var(--kj-accent-soft);--color-info-border:var(--color-accent);--color-layer-application:#6b21a8;--color-layer-transport:#005ea8;--color-layer-internet:#006e3b;--color-layer-link:#8a4b00;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--radius-1:4px;--radius-2:8px;--radius-3:12px;--font-base:var(--kj-font);--font-mono:var(--kj-font-mono);--line-height-body:1.7;--line-height-control:1.5;--line-height-heading:1.3;--reading-width:min(100%, 48rem);--content-width:1200px;--target-min:44px}@media (prefers-color-scheme:dark){:root:not(.light){--color-layer-application:#d8b4fe;--color-layer-transport:#8ecaff;--color-layer-internet:#67d59a;--color-layer-link:#ffd18a}}html.dark{--color-layer-application:#d8b4fe;--color-layer-transport:#8ecaff;--color-layer-internet:#67d59a;--color-layer-link:#ffd18a}*,:before,:after{box-sizing:border-box}html{font-size:100%}h1,h2,h3,h4{line-height:var(--line-height-heading);margin:0 0 var(--space-3)}h1{font-size:1.75rem}h2{margin-top:var(--space-6);font-size:1.375rem}h3{margin-top:var(--space-5);font-size:1.125rem}p,ul,ol,dl,table{margin:0 0 var(--space-4)}a{color:var(--color-primary);text-underline-offset:.2em}a:hover{text-decoration-thickness:2px}img,svg{max-width:100%}code,kbd,samp{font-family:var(--font-mono);font-size:1em}.page{max-width:var(--content-width);padding:var(--space-5) var(--space-4) var(--space-7);margin:0 auto}@media (width>=768px){.page{padding-left:var(--space-5);padding-right:var(--space-5)}}@media (width>=1200px){.page{padding-left:var(--space-6);padding-right:var(--space-6)}}.reading-width{max-width:var(--reading-width)}.breadcrumb{margin:0 0 var(--space-4);font-size:1rem}.breadcrumb ol{gap:var(--space-2);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.breadcrumb li+li:before{content:"/";margin-right:var(--space-2);color:var(--color-text-muted)}.breadcrumb [aria-current=page]{color:var(--color-text-muted)}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-3);padding:var(--space-5)}.card-grid{gap:var(--space-4);grid-template-columns:1fr;padding:0;list-style:none;display:grid}@media (width>=768px){.card-grid{grid-template-columns:repeat(2,1fr)}}.button{justify-content:center;align-items:center;gap:var(--space-2);min-height:var(--target-min);min-width:var(--target-min);padding:var(--space-2) var(--space-4);font:inherit;font-size:1rem;font-weight:700;line-height:var(--line-height-control);border:2px solid var(--color-primary);background:var(--color-primary);color:var(--color-on-primary);cursor:pointer;border-radius:10px;text-decoration:none;display:inline-flex}.button--secondary{border-color:var(--color-text);background:var(--color-surface);color:var(--color-text)}.button:not([disabled]):hover{background:color-mix(in srgb, var(--color-primary) 82%, var(--color-text))}.button--secondary:not([disabled]):hover{background:var(--color-surface-strong)}.button[disabled]{cursor:not-allowed;background:var(--color-surface-subtle);color:var(--color-text-muted);border-color:var(--color-border)}input,select,textarea{font:inherit;font-size:1rem;line-height:var(--line-height-control);min-height:var(--target-min);padding:var(--space-2) var(--space-3);color:var(--color-text);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-2)}.table-wrapper{overflow-x:auto}table{border-collapse:collapse;width:100%}caption{text-align:left;margin-bottom:var(--space-2);font-weight:700}th,td{border:1px solid var(--color-divider);padding:var(--space-2) var(--space-3);text-align:left;vertical-align:top}thead th{background:var(--color-surface-subtle)}.message{gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-2);border-left:6px solid var(--color-info-border);background:var(--color-info-surface);color:var(--color-text);display:flex}.message--success{border-left-color:var(--color-success-border);background:var(--color-success-surface)}.message--warning{border-left-color:var(--color-warning-border);background:var(--color-warning-surface)}.message--error{border-left-color:var(--color-error-border);background:var(--color-error-surface)}.message__title{font-weight:700}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.note{color:var(--color-text-muted)}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}.app{margin-top:var(--space-4)}.controls{gap:var(--space-3);margin:var(--space-4) 0;flex-wrap:wrap;display:flex}.button--small{min-height:var(--target-min);padding:var(--space-1) var(--space-3)}.button.is-selected{background:var(--color-info-surface);border-width:3px}.progress-text{font-weight:700}.question-prompt{font-size:1.0625rem}.choice-list,.role-answers{gap:var(--space-3);margin:var(--space-3) 0;display:grid}.choice{align-items:center;gap:var(--space-2);min-height:var(--target-min);display:flex}.choice input{width:1.5rem;height:1.5rem;min-height:auto}.choice label{flex:1}.role-answer{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.role-answer label{min-width:16rem;font-weight:700}fieldset{border:2px solid var(--color-border);border-radius:var(--radius-2);padding:var(--space-3) var(--space-4);margin:var(--space-4) 0}legend{padding:0 var(--space-2);font-weight:700}.hints{margin:var(--space-3) 0}.hint{padding:var(--space-3);border-left:6px solid var(--color-info-border);background:var(--color-info-surface);margin-bottom:var(--space-2)}.packet-layout{gap:var(--space-4);display:grid}@media (width>=900px){.packet-layout{grid-template-columns:1fr 1fr}}.packet-nesting{gap:var(--space-2);display:grid}.packet-box{border:3px solid var(--color-border);border-radius:var(--radius-2);padding:var(--space-3);background:var(--color-surface)}.packet-box__label{font-weight:700}.layer--application{border-color:var(--color-layer-application);border-style:solid}.layer--transport{border-color:var(--color-layer-transport);border-style:dashed}.layer--internet{border-color:var(--color-layer-internet);border-style:dotted}.layer--link{border-color:var(--color-layer-link);border-style:double}.packet-box--trailer{border-left-width:10px}.packet-state{font-weight:700}.step-list{padding-left:1.4em}.step-list__item{margin-bottom:var(--space-2)}.step-list__item.is-current{outline:3px solid var(--color-focus);outline-offset:4px;border-radius:var(--radius-1);font-weight:700}.answer-slots{margin:var(--space-3) 0;gap:var(--space-2);padding:0;list-style:none;display:grid}.answer-slot{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:2px solid var(--color-border);border-radius:var(--radius-2);background:var(--color-surface);flex-wrap:wrap;display:flex}.answer-slot__index{min-width:2rem;font-weight:700}.answer-slot__label{flex:1;min-width:12rem}.part-picker{gap:var(--space-2);flex-wrap:wrap;display:flex}.answer-reveal{margin-top:var(--space-3);font-weight:700}.result-area{margin-top:var(--space-4);gap:var(--space-3);display:grid}.log-list{padding-left:1.4em}.log-list li{margin-bottom:var(--space-2)}.log-list li[aria-current=step]{font-weight:700}.layer-nav{gap:var(--space-2);margin:var(--space-3) 0;flex-wrap:wrap;padding:0;list-style:none;display:flex}.layer-nav__item{border:2px solid var(--color-border);border-radius:var(--radius-2);padding:var(--space-2) var(--space-3);background:var(--color-surface)}.layer-nav__item[data-status=異常]{border-color:var(--color-error-border);background:var(--color-error-surface)}.layer-nav__item[data-status=正常]{border-color:var(--color-success-border);background:var(--color-success-surface)}.field{gap:var(--space-1);margin-bottom:var(--space-4);max-width:28rem;display:grid}.field label{font-weight:700}.field__support{color:var(--color-text-muted)}.field__error{color:var(--color-error);font-weight:700}.field input.is-invalid,.field select.is-invalid{border-color:var(--color-error-border);border-width:3px}.binary-panel{overflow-x:auto}.binary-row{font-family:var(--font-mono);gap:var(--space-3);margin-bottom:var(--space-2);flex-wrap:wrap;font-size:1rem;display:flex}.binary-row__label{font-family:var(--font-base);min-width:10rem;font-weight:700}.binary-network{text-underline-offset:3px;text-decoration:underline}.binary-host{text-decoration:overline}.terminal{font-family:var(--font-mono);background:var(--color-surface-subtle);border:1px solid var(--color-border);border-radius:var(--radius-2);padding:var(--space-3);white-space:pre-wrap}.board-simple{gap:var(--space-3);margin:var(--space-4) 0;display:grid}@media (width>=900px){.board-simple{grid-template-columns:1fr 1fr}.board-router{grid-column:1/-1}}.board-lan{border:3px solid var(--color-info-border);background:var(--color-info-surface);border-radius:var(--radius-3);padding:var(--space-3)}.board-lan--b{border-style:dashed;border-color:var(--color-success-border);background:var(--color-success-surface)}.board-lan__label{margin:0 0 var(--space-2);font-weight:700}.board-devices{gap:var(--space-2);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.board-device{align-items:center;gap:var(--space-2);border:2px solid var(--color-border);border-radius:var(--radius-2);background:var(--color-surface);padding:var(--space-2) var(--space-3);display:flex}.board-router{border:3px double var(--color-border);border-radius:var(--radius-2);background:var(--color-surface);padding:var(--space-3);text-align:center;font-weight:700}.records-summary{margin:var(--space-3) 0 0}.records-summary div{gap:var(--space-2);padding:var(--space-2) 0;border-top:1px solid var(--color-divider);flex-wrap:wrap;display:flex}.records-summary dt{min-width:10rem;font-weight:700}.records-summary dd{margin:0}.board{--board-card-width:132px;--board-card-height:96px;--board-padding:24px;background:var(--color-surface-subtle);border:1px solid var(--color-border);border-radius:var(--radius-2);min-height:20rem;position:relative;overflow:hidden}.board__canvas{transform-origin:0 0;position:absolute;inset:0}.board__device{width:var(--board-card-width);min-height:var(--board-card-height);padding:var(--space-2);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-2);text-align:center;position:absolute}.board__device-name{font-weight:700}.board__controls{gap:var(--space-2);margin-top:var(--space-3);flex-wrap:wrap;align-items:center;display:flex}.board__lan{border:3px solid var(--color-info-border);border-radius:var(--radius-3);background:var(--color-info-surface);position:absolute}.board__lan--b{border-style:dashed;border-color:var(--color-success-border);background:var(--color-success-surface)}.board__lan-label{top:0;left:var(--space-2);padding:0 var(--space-2);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-1);font-weight:700;position:absolute;transform:translateY(-50%)}@media print{:root:not(#kj-print){--color-layer-application:#6b21a8;--color-layer-transport:#005ea8;--color-layer-internet:#006e3b;--color-layer-link:#8a4b00}body.kj-body{font-size:11pt}a[data-site-bar],header[data-kj-header],footer[data-site-footer],.breadcrumb,nav,button,.button,[data-print=hide]{display:none!important}[data-print=only]{display:block!important}a{color:var(--color-text);text-decoration:none}a[href]:after{content:""}.card,table,tr,li{break-inside:avoid}table,th,td{border:1px solid var(--color-border)}.page{max-width:none;padding:0}.print-note{white-space:pre-wrap}}@media screen{[data-print=only]{display:none}}