/* Compact toolbar and independent, zoomable canvas. */
main{position:relative;max-width:none;padding:14px 24px}.toolbar{align-items:center;justify-content:flex-start;gap:8px}.toolbar h1{font-size:20px;margin-right:2px}.actions{margin-left:auto}.table-heading{margin-top:14px}.notice{margin:8px 0 10px}.viewport-tools{display:flex;align-items:center;gap:4px;margin:0}.viewport-tools button{padding:8px 9px;font-size:13px}.zoom-input{display:flex;align-items:center;border:1px solid #bac8d6;border-radius:6px;background:white;padding-right:6px;font-size:13px}#zoom-level{width:58px;padding:8px 2px 8px 6px;border:0;background:transparent;font:inherit;color:inherit;text-align:center}#zoom-level:focus-visible{outline:3px solid #246abc;outline-offset:2px}.toolbar{margin-bottom:10px}.views button{padding:10px}.actions button{padding:10px}.viewport-tools{flex-shrink:0}.table-scroll{position:relative;height:calc(100dvh - 150px);min-height:300px;overflow:hidden;padding:0;border:1px solid #d9e2ec;border-radius:8px;background:#fff;touch-action:none;cursor:grab;user-select:none}.table-scroll.dragging,.table-scroll.dragging *{cursor:grabbing!important}.table-scroll.dragging{user-select:none}#periodic-table,#periodic-table[data-view=main]{position:absolute;left:0;top:0;width:max-content;max-width:none;margin:0;transform-origin:0 0;grid-template-columns:34px repeat(var(--columns),112px);gap:5px;padding:4px}#periodic-table .element{height:102px;min-height:102px;padding:30px 2px 23px;touch-action:none}.element strong{position:relative;z-index:1;font-size:32px;pointer-events:none}.element .atomic-mass{font-size:17px;top:4px;left:4px}.element .number{font-size:18px;left:4px;bottom:3px}.en-value{position:absolute;right:4px;top:25px;font-size:16px}.radius-value{position:absolute;right:4px;bottom:5px;font-size:14px}.radius-circle{position:absolute;aspect-ratio:1;border:1px solid #183c6055;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}.phase{position:absolute;right:4px;top:45px;font-size:14px;border-radius:3px;padding:1px 4px;background:#fff;color:#263f57}.phase-G{background:#fef0c5}.phase-L{background:#d4f0fc}.phase-F{background:#e3e8ef}.radioactive{border-left:4px solid transparent;background-image:repeating-linear-gradient(135deg,#283b50 0 2px,#fff 2px 4px);background-size:3px 100%;background-repeat:no-repeat}.radioactive-mark{position:absolute;left:5px;top:26px;font-size:17px}#settings{position:absolute;top:66px;right:24px;left:auto;width:min(650px,calc(100% - 48px));z-index:20;margin:0;box-shadow:0 12px 40px #183c6030;gap:18px}#settings fieldset{gap:14px;color:#344e68}#settings input{accent-color:#1c4f7e}#info-legend{font-size:12px;color:#415b74;padding:10px 0}#info-legend p{margin:5px 0}#info-legend a{color:#215f94}#legend{margin-top:10px;padding:10px 0}.presentation .table-scroll{height:calc(100dvh - 100px)}.presentation main{padding-bottom:20px}.presentation #exit-present{bottom:10px;right:24px}.presentation footer{padding-right:250px}
@media(max-width:700px){main{padding:12px}.toolbar{gap:8px}.toolbar h1{font-size:17px}.views{width:auto;flex:1}.views button{padding:8px 6px;font-size:12px}.actions{margin-left:0}.table-heading{margin-top:10px;flex-direction:row}.table-heading h2{font-size:15px}.notice{font-size:11px}.table-scroll{height:calc(100dvh - 210px)}#settings{top:110px;right:12px;width:calc(100% - 24px)}.presentation .table-scroll{height:calc(100dvh - 130px)}}
@media print{.viewport-tools,.notice{display:none!important}.table-scroll,.presentation .table-scroll{height:auto;min-height:0;overflow:visible;border:0;background:none}#periodic-table,#periodic-table[data-view=main]{position:static;width:100%;transform:none!important;grid-template-columns:20px repeat(var(--columns),minmax(0,1fr));gap:2px;padding:0}#periodic-table .element{height:64px;min-height:64px;padding:20px 0 15px}.element strong{font-size:17px}.element .atomic-mass,.en-value,.radius-value,.phase{font-size:6px}.element .atomic-mass{left:1px}.en-value{top:13px;right:1px}.radius-value{right:1px}.phase{right:1px;padding:0}.radius-circle{max-width:85%}.radioactive-mark{font-size:9px;top:18px;left:2px}#info-legend{font-size:9px;filter:grayscale(1)}.presentation footer{padding-right:0}}

@media screen{.element strong{transform:translateY(8px)}}