:root{--ink:#1b1a18;--slab:#cbc7bd;--slab2:#b4b0a5;--trav:#dccdb0;--sig:#e2521d}
:where(#kt-root) *{margin:0;padding:0;box-sizing:border-box}
html.kt-page, body.kt-page{height:100%;background:#000;overflow:hidden;color:var(--ink);font-family:'Archivo',Arial,sans-serif;user-select:none;-webkit-user-select:none}
:where(#kt-root) #container{position:fixed;inset:0;z-index:1}
:where(#kt-root) #container canvas{display:block;touch-action:none}
:where(#kt-root) .slab{background:var(--slab);border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink)}
:where(#kt-root) button{font:inherit;color:inherit;cursor:pointer;background:var(--trav);border:3px solid var(--ink);padding:9px 14px;font-weight:700;font-stretch:80%;font-size:15px;border-radius:0}
:where(#kt-root) button:hover{background:var(--ink);color:var(--trav)}
:where(#kt-root) button:active{transform:translate(2px,2px)}
:where(#kt-root) button:disabled{opacity:.4;cursor:not-allowed;background:var(--slab2);color:var(--ink);transform:none}
:where(#kt-root) button:focus-visible, :where(#kt-root) input:focus-visible{outline:3px solid var(--sig);outline-offset:2px}
:where(#kt-root) button svg{width:18px;height:18px;vertical-align:-3px;margin-right:8px}
:where(#kt-root) #btnAdd{background:var(--ink);color:var(--trav)}
:where(#kt-root) #btnAdd:hover{background:var(--sig);color:var(--ink)}
body.walking #menuPanel .m-cursor{display:none}
body:not(.walking) #menuPanel .m-walk{display:none}
:where(#kt-root) #cross{position:fixed;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;z-index:15;border:2px solid #fff;mix-blend-mode:difference;pointer-events:none;display:none}
body.walking #cross{display:block}
body.walking.over #cross{background:#fff;transform:rotate(45deg)}
:where(#kt-root) #tip{position:fixed;left:50%;top:calc(50% + 26px);transform:translateX(-50%);z-index:15;background:var(--ink);color:var(--trav);padding:6px 10px;font-size:13px;font-weight:600;pointer-events:none;white-space:nowrap;display:none;font-stretch:85%}
:where(#kt-root) #tip.on{display:block}
body:not(.walking) #tip.on{left:var(--tx,50%);top:var(--ty,50%);transform:translate(14px,14px)}
:where(#kt-root) #tourBtn{position:fixed;right:22px;bottom:22px;z-index:20;background:var(--ink);color:var(--trav);box-shadow:7px 7px 0 var(--sig);padding:13px 20px;font-size:16px}
:where(#kt-root) #tourBtn.active{background:var(--sig);color:var(--ink);box-shadow:7px 7px 0 var(--ink)}
:where(#kt-root) #inspector{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:30;width:min(600px,calc(100vw - 32px));padding:12px 14px 14px}
:where(#kt-root) #inspector[hidden]{display:none}
:where(#kt-root) #inspector .head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;border-bottom:3px solid var(--ink);padding-bottom:8px}
:where(#kt-root) #insType{font-weight:900;font-size:20px;font-stretch:62%}
:where(#kt-root) #insName{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-stretch:85%}
:where(#kt-root) #insClose{padding:2px 9px;font-size:18px;line-height:1}
:where(#kt-root) .ins-row{display:flex;gap:10px;align-items:center;margin-top:9px;flex-wrap:wrap}
:where(#kt-root) .ins-row label{display:flex;align-items:center;gap:10px;flex:1 1 220px;font-size:13px;font-weight:700;font-stretch:85%}
:where(#kt-root) .ins-row label span{width:76px;flex:none}
:where(#kt-root) .ins-row output{width:48px;text-align:right;font-size:13px;font-weight:700}
:where(#kt-root) input[type=range]{flex:1;min-width:90px;accent-color:var(--ink);height:22px}
:where(#kt-root) input[type=range]:disabled{opacity:.35}
:where(#kt-root) #btnLock{background:var(--ink);color:var(--trav);flex:1 1 auto;font-size:16px;padding:11px 14px}
:where(#kt-root) #btnLock.locked{background:var(--sig);color:var(--ink)}
:where(#kt-root) #btnLock:hover{outline:3px solid var(--sig);outline-offset:-3px}
:where(#kt-root) .frame-only, :where(#kt-root) .video-only, :where(#kt-root) .model-only{display:none}
:where(#kt-root) #inspector.is-frame .frame-only, :where(#kt-root) #inspector.is-video .video-only, :where(#kt-root) #inspector.is-model .model-only{display:flex}
:where(#kt-root) #insNote{font-size:12px;margin-top:8px;font-stretch:85%;opacity:.8}
:where(#kt-root) #toast{position:fixed;left:50%;top:calc(var(--fa-header-h,64px) + 10px);transform:translateX(-50%);z-index:60;background:var(--ink);color:var(--trav);padding:10px 16px;font-weight:700;font-size:14px;max-width:min(560px,92vw);text-align:center;border:3px solid var(--trav);pointer-events:none;opacity:0;transition:opacity .18s}
:where(#kt-root) #toast.on{opacity:1}
:where(#kt-root) #dropHint{position:fixed;inset:0;z-index:70;background:rgba(27,26,24,.82);color:var(--trav);display:none;align-items:center;justify-content:center;font-size:44px;font-weight:900;font-stretch:62%;text-align:center;padding:30px;pointer-events:none;border:10px solid var(--sig)}
:where(#kt-root) #dropHint.on{display:flex}

/* --- мобильное управление: подсказки меню --- */
body.kt-touch #kt-root #menuPanel .m-mode,body.kt-touch #kt-root #menuPanel .m-help:not(.m-help-touch){display:none}
#kt-root #menuPanel .m-help-touch{display:none}
body.kt-touch #kt-root #menuPanel .m-help-touch{display:block}


/* --- добавлено для демо --- */
/* панель компаса (#menuPanel) оформляется общими классами сайта fa-pop-* (_core/imm-tools.css); здесь — только логика показа */
#kt-root #dropHint small{display:block;margin-top:16px;font-size:15px;font-weight:700;font-stretch:85%;opacity:.85}
/* подпись работы при наведении (боевая версия; текст — из описания файла в медиагалерее) */
:where(#kt-root) #capTip{position:fixed;left:50%;top:calc(50% + 62px);transform:translateX(-50%);z-index:15;background:var(--trav);color:var(--ink);border:3px solid var(--ink);padding:8px 12px;font-size:14px;font-weight:600;line-height:1.35;max-width:min(360px,80vw);pointer-events:none;white-space:pre-wrap;word-break:break-word;display:none;font-stretch:90%}
:where(#kt-root) #capTip.on{display:block}
body:not(.walking) #capTip.on{left:var(--tx,50%);top:var(--ty,50%);transform:translate(14px,52px)}
body:not(.walking) #capTip.on.flip{transform:translate(calc(-100% - 14px),52px)}
body:not(.walking) #capTip.on.up{transform:translate(14px,calc(-100% - 14px))}
body:not(.walking) #capTip.on.flip.up{transform:translate(calc(-100% - 14px),calc(-100% - 14px))}
:where(#kt-root) #insCap{font-size:13px;font-weight:600;line-height:1.35;margin:0 0 8px;white-space:pre-wrap;word-break:break-word;max-height:4.2em;overflow:auto}
body.kt-view .m-help span:empty,body.kt-view .m-help span:empty+br{display:none}