:host([reader-layout]) button:focus-visible{outline: 2px solid #a9f1f3;outline-offset: 3px}:host([reader-layout]) .btn:not(:disabled):hover{filter: brightness(1.18)}:host([reader-layout]) .toggle button:not(.on):hover{background: #202c43;color: #fff}@media (max-width: 640px){:host([reader-layout]) .wrap{padding: 16px 12px}:host([reader-layout]) .top{gap: 12px}:host([reader-layout]) .top>span{display: none}:host([reader-layout]) .title{font-size: 16px;line-height: 1.5}:host([reader-layout]) .controls{display: grid;grid-template-columns: repeat(4,minmax(0,1fr));width: 100%;gap: 6px}:host([reader-layout]) .btn{min-height: 44px;padding: 8px 3px;font-size: 12px}:host([reader-layout]) .toggle{display: flex;width: 100%}:host([reader-layout]) .toggle button{flex: 1;min-width: 0;padding: 10px 7px;line-height: 1.4}:host([reader-layout]) .node{padding: 10px 7px}:host([reader-layout]) .node::before{font-size: 20px}:host([reader-layout]) .node .nm{font-size: 13px;line-height: 1.4}:host([reader-layout]) .node .rl{font-size: 11px;line-height: 1.4}:host([reader-layout]) .node .bal{font-size: 12px;line-height: 1.4}:host([reader-layout]) .node.active{transform: none}:host([reader-layout]) .chip{max-width: 110px;white-space: normal;text-align: center;padding: 5px 7px;font-size: 11px}:host([reader-layout]) .narr{gap: 10px;padding: 12px;font-size: 14px;line-height: 1.65}:host([reader-layout]) .stepno{width: 32px;height: 32px}:host([reader-layout]) .nets{grid-template-columns: repeat(2,minmax(0,1fr));gap: 10px}:host([reader-layout]) .net{padding: 12px;min-width: 0}:host([reader-layout]) .net .val{font-size: 19px;line-height: 1.4;overflow-wrap: anywhere}:host([reader-layout]) .legend{gap: 10px 14px}}:host([reader-layout]) .net:last-child:nth-child(odd){grid-column: 1 / -1}@media (max-width: 360px){:host([reader-layout]) .nets{grid-template-columns: minmax(0,1fr)}}