:root{--ink:#1d2934;--sub:#697885;--paper:#f9faf9;--glass:rgba(255,255,255,.74);--line:rgba(213,220,224,.75);--shadow:0 8px 35px rgba(30,44,57,.10);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;color:var(--ink);background:var(--paper)}button,a{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,.stage:focus-visible{outline:2px solid #bf764a;outline-offset:2px}
.app{position:relative;height:100dvh;width:100%;overflow:hidden}.stage{position:absolute;inset:0;background:white;overflow:hidden;overscroll-behavior:contain;touch-action:none}
.drawio-viewer{position:absolute;inset:0;overflow:hidden!important;touch-action:none!important;cursor:grab;background:#fff}.drawio-viewer:active{cursor:grabbing}.drawio-viewer[hidden],.diagram-layer[hidden],.empty-state[hidden],.drawer-backdrop[hidden]{display:none!important}.drawio-viewer svg{user-select:none}.diagram-layer{position:absolute;top:0;left:0;transform-origin:0 0}.diagram-layer img{max-width:none;display:block}
.topbar{position:absolute;z-index:10;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));display:flex;align-items:flex-start;justify-content:space-between;gap:8px;pointer-events:none}
.brand,.glass-btn,.controls,.statusbar,.hint-toggle,.version{border:1px solid rgba(255,255,255,.75);background:var(--glass);box-shadow:var(--shadow);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%)}
.brand{display:flex;align-items:center;gap:9px;padding:5px 11px 5px 5px;border-radius:14px;pointer-events:auto;min-width:0}.brandmark{height:36px;width:36px;flex:none;display:grid;place-items:center;color:#fff;font-size:20px;font-weight:850;border-radius:10px;background:linear-gradient(140deg,#b55f42,#e3a47a)}.brand strong{display:block;font-size:11px;letter-spacing:.10em}.brand small{display:block;font-size:10px;color:#677b8a;margin-top:2px;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-actions{display:flex;align-items:center;gap:6px;pointer-events:auto}.version{border-radius:20px;padding:9px 11px;font-size:10px;font-weight:750;color:#96613d;white-space:nowrap}.glass-btn{min-width:40px;height:40px;padding:0 11px;color:var(--ink);border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.glass-btn:hover,.controls button:hover,.hint-toggle:hover{background:rgba(255,255,255,.96)}.history-toggle{font-size:12px;font-weight:700}.history-toggle>span:first-child{font-size:21px;font-weight:400}
.controls{position:absolute;z-index:6;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:2px;align-items:center;padding:5px;border-radius:17px;opacity:.85;transition:opacity .18s ease,background .18s ease}.controls:hover,.controls:focus-within{opacity:1;background:#fffffff0}.controls[hidden]{display:none}.controls button{width:42px;height:42px;background:transparent;border:0;border-radius:11px;color:var(--ink);font-size:22px}.zoom-readout{min-width:45px;text-align:center;font-size:12px;font-weight:750;font-variant-numeric:tabular-nums}.control-divider{height:22px;width:1px;background:#dce3e6;margin:0 4px}
.statusbar{position:absolute;z-index:5;left:max(8px,env(safe-area-inset-left));bottom:calc(13px + env(safe-area-inset-bottom));max-width:calc(45vw - 100px);height:28px;border-radius:20px;display:flex;align-items:center;gap:7px;padding:0 11px;opacity:.78;font-size:10px;color:var(--sub)}.statusbar #status{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#55b18f}.hint-toggle{position:absolute;z-index:5;right:max(8px,env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));height:34px;width:34px;border-radius:50%;font-weight:800;font-size:13px;color:#647585}
.empty-state,.viewer-notice{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:410px;width:calc(100% - 30px);padding:27px;border:1px solid #e3e9e9;border-radius:18px;background:#fffffff0;box-shadow:var(--shadow);text-align:center;z-index:8}.empty-state h2{font-size:19px}.empty-state p,.viewer-notice p{color:var(--sub);font-size:12px;line-height:1.7}.viewer-notice[hidden]{display:none}.viewer-notice button{background:#273d4e;border:0;border-radius:9px;color:white;padding:11px 14px;margin-top:10px}.spinner{width:24px;height:24px;border-radius:50%;border:3px solid #e6d0c3;border-top-color:#c27f57;animation:spin 1s linear infinite;margin:auto}@keyframes spin{to{transform:rotate(360deg)}}
.drawer-backdrop{position:absolute;z-index:15;inset:0;background:rgba(19,33,44,.18);backdrop-filter:blur(2px)}.side-panel{position:absolute;z-index:16;top:9px;bottom:9px;right:9px;width:min(410px,calc(100vw - 18px));border:1px solid #fff;border-radius:20px;background:rgba(255,255,255,.96);box-shadow:0 18px 70px rgba(15,32,45,.22);transform:translateX(calc(100% + 20px));transition:transform .24s ease;display:flex;flex-direction:column;overflow:hidden}.side-panel.open{transform:translateX(0)}
.panel-top{padding:24px 22px 12px;display:flex;align-items:flex-start;justify-content:space-between}.panel-top small,.revision-current>span,.modal-header small{font-size:9px;font-weight:850;letter-spacing:.14em;color:#bc744b}.panel-top h2,.modal-header h2{font-size:22px;letter-spacing:-.035em;margin:5px 0}.panel-intro{padding:0 22px;color:#738390;font-size:12px;line-height:1.7;margin:0 0 18px}.revision-current{background:#f3f6f5;border:1px solid #e6ebec;border-radius:13px;margin:0 20px 16px;padding:14px;display:flex;flex-direction:column;gap:7px}.revision-current strong{font-size:16px;font-variant-numeric:tabular-nums}.revision-current small{font-size:11px;color:var(--sub)}.history-list{overflow:auto;padding:0 20px 20px;flex:1}.history-entry{padding:14px 1px 15px;border-bottom:1px solid #e8ecee;display:flex;gap:12px}.history-marker{width:9px;height:9px;flex:none;border:2px solid #c98a64;border-radius:50%;margin-top:5px}.history-entry h3{font-size:12px;line-height:1.4;margin:0 0 6px}.history-entry p{font-size:11px;color:var(--sub);line-height:1.5;margin:0}.history-entry a{font-size:11px;color:#99613d;text-decoration:none;font-weight:700}.history-limit{padding:0 22px;font-size:10px;color:var(--sub);line-height:1.5}.panel-bottom{padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #e8edee;font-size:10px;color:var(--sub)}.panel-bottom a{color:#a56c48;text-decoration:none}
.meta-dialog{background:#fff;color:var(--ink);border:1px solid #edf1f2;border-radius:20px;box-shadow:0 25px 90px #10233755;padding:25px;width:min(540px,calc(100% - 25px))}.meta-dialog::backdrop{background:#15283866;backdrop-filter:blur(4px)}.modal-header{display:flex;align-items:flex-start;justify-content:space-between}.meta-fields{margin:18px 0 10px}.meta-fields>div{display:grid;grid-template-columns:40% 1fr;gap:10px;border-top:1px solid #e7edef;padding:11px 0;font-size:12px}.meta-fields dt{color:var(--sub)}.meta-fields dd{margin:0;overflow-wrap:anywhere;font-weight:650}.modal-note,.guide-dialog p{font-size:12px;color:var(--sub);line-height:1.8}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:700px){.topbar{top:5px;left:5px;right:5px}.brand{padding:3px 8px 3px 3px;gap:6px}.brandmark{width:32px;height:32px;font-size:18px}.brand strong{font-size:10px}.brand small{font-size:9px;max-width:125px}.version{display:none}.glass-btn{width:37px;height:37px;min-width:37px;padding:0}.desktop-label{display:none}.controls{bottom:calc(12px + env(safe-area-inset-bottom));padding:3px;border-radius:14px}.controls button{width:39px;height:42px}.control-divider{margin:0 1px}.statusbar{top:51px;left:7px;bottom:auto;max-width:calc(100vw - 14px);height:24px;box-shadow:none;font-size:9px;background:rgba(255,255,255,.56)}.hint-toggle{right:9px;bottom:calc(20px + env(safe-area-inset-bottom));height:31px;width:31px}.side-panel{right:0;top:0;bottom:0;border-radius:18px 0 0 18px;width:min(390px,92vw)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}