/* Al-Urmawī Advar Atlas PWA and responsive layer — v4.1.0 */
:root{
 --manuscript-paper:#e8d5ae;--manuscript-paper-light:#f5e9cf;--manuscript-red:#a94e39;
 --manuscript-red-soft:rgba(169,78,57,.22);--manuscript-ink:#17130f;
 --safe-bottom:env(safe-area-inset-bottom,0px);--safe-top:env(safe-area-inset-top,0px);--mobile-theory-width:1050px
}
body::before{background-image:radial-gradient(circle at 12% 12%,rgba(169,78,57,.055),transparent 28%),radial-gradient(circle at 84% 8%,rgba(232,213,174,.055),transparent 30%)}
.brand-mark{overflow:hidden;padding:3px;background:linear-gradient(145deg,rgba(232,213,174,.11),rgba(169,78,57,.08));border-color:rgba(232,201,119,.52)}
.brand-mark img{width:100%;height:100%;display:block;border-radius:5px}
.eyebrow{display:flex;align-items:center;gap:3px;font:600 7px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(239,230,207,.42);margin-bottom:3px}
.family-link{color:var(--atlas-gold);text-decoration:none}.family-link:hover{text-decoration:underline}
.install-btn{border-color:rgba(169,78,57,.65);background:linear-gradient(180deg,rgba(169,78,57,.25),rgba(169,78,57,.10));color:#f4dca7}
.mobile-header-menu,.mobile-nav,.mobile-instrument-toggle,.mobile-stage-tools{display:none}
.mono-scroll-shell{min-width:0;overflow:visible}
.network-banner{position:fixed;z-index:10000;left:50%;top:calc(10px + var(--safe-top));transform:translate(-50%,-160%);padding:8px 14px;border-radius:999px;background:#211914;color:#f5e9cf;border:1px solid rgba(169,78,57,.65);font:700 11px/1 var(--mono);transition:transform .25s ease}.network-banner.show{transform:translate(-50%,0)}

/* Opening screen */
.welcome-screen{position:fixed;z-index:9000;inset:0;display:grid;place-items:center;overflow:hidden;padding:24px;background:radial-gradient(900px 600px at 15% 10%,rgba(169,78,57,.18),transparent 65%),radial-gradient(800px 520px at 90% 0%,rgba(232,201,119,.12),transparent 65%),#0d121e;transition:opacity .34s ease,visibility .34s ease}
.welcome-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}
.welcome-manuscript{position:absolute;inset:0;overflow:hidden;opacity:.45;pointer-events:none}
.manuscript-rings{position:absolute;width:min(80vw,760px);aspect-ratio:1;left:-10vw;top:-24vh;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 39px,rgba(169,78,57,.40) 40px 42px);filter:blur(.1px);transform:rotate(-5deg)}
.manuscript-rings::after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 5deg,rgba(169,78,57,.32) 0 1deg,transparent 1deg 29deg);mask:radial-gradient(circle,transparent 0 14%,#000 15% 90%,transparent 91%)}
.manuscript-arcs{position:absolute;width:min(74vw,680px);height:min(50vw,470px);right:-12vw;bottom:-12vh;border-radius:100% 0 0 0;background:repeating-radial-gradient(ellipse at 0 100%,transparent 0 45px,rgba(232,201,119,.28) 46px 48px)}
.welcome-card{position:relative;width:min(720px,94vw);padding:42px 46px 32px;border:1px solid rgba(232,201,119,.28);border-radius:24px;background:linear-gradient(155deg,rgba(26,34,53,.96),rgba(10,14,23,.96));box-shadow:0 42px 100px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.035);backdrop-filter:blur(12px);text-align:center}
.welcome-brandline{display:flex;justify-content:center;align-items:center;gap:12px;color:rgba(239,230,207,.58);font:700 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}.welcome-brandline img{width:58px;height:58px;border-radius:14px;box-shadow:0 10px 25px rgba(0,0,0,.30)}
.welcome-eyebrow{margin:26px 0 8px;color:var(--atlas-teal);font:700 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase}.welcome-card h1{margin:0;color:var(--atlas-gold);font:700 clamp(34px,6vw,62px)/1 var(--body);letter-spacing:-.025em}.welcome-card h1::after{content:"";display:block;width:110px;height:2px;margin:22px auto;background:linear-gradient(90deg,transparent,var(--manuscript-red),transparent)}.welcome-card>p#welcomeLead{max-width:580px;margin:0 auto 28px;color:rgba(239,230,207,.72);font:400 16px/1.55 var(--body)}
.welcome-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.welcome-actions button{min-height:48px;padding:0 20px;border-radius:10px;font:700 11px/1 var(--mono)}.welcome-primary{border:1px solid #d7b66d;background:linear-gradient(180deg,#d7b66d,#a97b37);color:#15120e;box-shadow:0 10px 24px rgba(215,182,109,.18)}.welcome-secondary{border:1px solid rgba(239,230,207,.18);background:rgba(255,255,255,.045);color:var(--parchment)}.welcome-links{display:flex;justify-content:center;gap:18px;margin-top:19px}.welcome-links button{border:0;background:none;color:rgba(239,230,207,.48);font:600 9px/1 var(--mono);text-decoration:underline;text-underline-offset:3px}.welcome-foot{display:flex;justify-content:center;gap:22px;margin-top:27px;padding-top:18px;border-top:1px solid rgba(239,230,207,.08);color:rgba(239,230,207,.34);font:600 8px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em}

/* Sheets, About, update */
.app-sheet{position:fixed;z-index:8800;inset:0;visibility:hidden;pointer-events:none}.app-sheet.open{visibility:visible;pointer-events:auto}.sheet-scrim{position:absolute;inset:0;border:0;background:rgba(0,0,0,.62);opacity:0;transition:opacity .22s}.app-sheet.open .sheet-scrim{opacity:1}.sheet-panel{position:absolute;left:50%;bottom:0;width:min(620px,100%);max-height:min(82dvh,720px);overflow:auto;transform:translate(-50%,105%);transition:transform .25s cubic-bezier(.2,.75,.2,1);padding:8px 18px calc(20px + var(--safe-bottom));border-radius:22px 22px 0 0;border:1px solid rgba(232,201,119,.20);border-bottom:0;background:linear-gradient(160deg,#202941,#101521);box-shadow:0 -25px 65px rgba(0,0,0,.5)}.app-sheet.open .sheet-panel{transform:translate(-50%,0)}.sheet-handle{width:42px;height:4px;border-radius:4px;margin:2px auto 8px;background:rgba(239,230,207,.22)}.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:7px 2px 14px}.sheet-head h2{margin:0;font:700 20px/1 var(--body);color:var(--atlas-gold)}.sheet-head button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(239,230,207,.13);background:rgba(255,255,255,.04);color:var(--parchment);font-size:22px}.sheet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.sheet-grid>button,.sheet-grid>a{min-height:76px;padding:12px;border-radius:13px;border:1px solid rgba(239,230,207,.11);background:rgba(255,255,255,.035);color:var(--parchment);text-decoration:none;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.sheet-grid span{color:var(--manuscript-red);font:700 18px/1 var(--mono)}.sheet-grid b{font:700 11px/1.2 var(--mono)}.settings-list{display:grid;gap:10px}.settings-list label{display:flex;justify-content:space-between;align-items:center;min-height:54px;padding:0 14px;border:1px solid rgba(239,230,207,.10);border-radius:11px;background:rgba(255,255,255,.03);font:600 11px/1.3 var(--mono)}.settings-list input{width:22px;height:22px;accent-color:var(--manuscript-red)}.settings-danger{min-height:48px;border:1px solid rgba(188,89,96,.55);border-radius:10px;background:rgba(188,89,96,.10);color:#f0a2a7;font:700 10px/1 var(--mono)}
.about-dialog-card{max-width:720px}.about-hero{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:20px;padding:18px;border-radius:14px;background:linear-gradient(145deg,rgba(232,201,119,.07),rgba(169,78,57,.05));border:1px solid rgba(232,201,119,.13)}.about-hero img{width:96px;height:96px;border-radius:22px}.about-hero p{margin:0 0 7px;color:var(--atlas-teal);font:700 8px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}.about-hero h3{margin:0 0 7px;font:700 25px/1.05 var(--body);color:var(--atlas-gold)}.about-hero p:last-child{color:rgba(239,230,207,.66);font:400 12px/1.45 var(--body);letter-spacing:0;text-transform:none}.about-links{display:flex;flex-wrap:wrap;gap:8px}.about-links a{padding:8px 10px;border-radius:8px;border:1px solid rgba(239,230,207,.12);background:rgba(255,255,255,.025);color:var(--atlas-teal);text-decoration:none;font:600 9px/1 var(--mono)}.version-line{text-align:center;color:rgba(239,230,207,.36);font:600 8px/1 var(--mono)}
.update-toast{position:fixed;z-index:9900;left:50%;bottom:calc(22px + var(--safe-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:10px;width:min(520px,calc(100vw - 24px));padding:12px 14px;border-radius:13px;border:1px solid rgba(232,201,119,.35);background:#151c2b;box-shadow:0 18px 50px rgba(0,0,0,.5);font:600 10px/1.2 var(--mono)}.update-toast button{min-height:36px;border-radius:7px;border:1px solid rgba(239,230,207,.15);background:rgba(255,255,255,.05);color:var(--parchment)}#updateAppBtn{margin-left:auto;padding:0 12px;border-color:rgba(232,201,119,.5);color:var(--atlas-gold)}#dismissUpdateBtn{width:36px}

/* Tablet: true responsive layout instead of scaled 1280px canvas. */
@media (max-width:1100px){
 html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
 #viewport{position:static;display:block;overflow:visible;min-height:100dvh}
 #app{width:100%;height:auto;min-height:100dvh;transform:none!important;transform-origin:initial;display:flex;flex-direction:column;border:0;overflow:visible;box-shadow:none}
 .topbar{position:sticky;top:0;z-index:100;min-height:68px;padding:8px 12px;background:rgba(14,18,29,.96);backdrop-filter:blur(12px)}
 .brand-mark{width:52px;height:52px}.title-ar{font-size:23px}.title-en{font-size:15px}.subtitle{max-width:48vw}.brand-facts{display:none}
 .header-actions{flex-wrap:nowrap}.header-actions .source-btn,.header-actions .focus-btn,.header-actions .compact-icon{display:none}.mobile-header-menu{display:block}
 .mono-panel{height:auto;min-height:0;padding:8px 12px 10px;grid-template-rows:auto auto auto;overflow:visible}
 .mono-scroll-shell{overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:rgba(232,201,119,.35) transparent}
 #monoSvg{width:1120px;max-width:none;height:150px}
 .instrument-wrap{overflow:hidden;margin-top:-16px}.instrument-wrap #instrumentSvg{width:1120px;max-width:none;height:130px}
 .theory-hud{position:relative;left:auto!important;right:auto!important;top:auto!important;width:100%;display:grid;grid-template-columns:1.3fr repeat(3,1fr) auto;gap:6px;margin:4px 0 6px;padding:7px 9px}.hud-primary{margin:0;padding:0 8px 0 0;border:0;border-right:1px solid rgba(239,230,207,.08)}.hud-metric{display:grid;align-content:center}.hud-model{margin:0;padding:0;align-self:center;border:0}.stage-legend,.view-state-label,.presentation-hint{display:none!important}
 .tabs{position:sticky;top:68px;z-index:90;min-height:48px;overflow-x:auto;grid-template-columns:repeat(6,minmax(125px,1fr));padding:0 8px}.tab{min-height:48px}
 .workspace{height:auto;min-height:460px;padding:10px 12px 20px;overflow:visible}.panel,.panel.active{height:auto;min-height:0}.learn-grid,.explore-grid,.construct-grid,.listen-grid,.modes-grid,.train-grid{height:auto;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.learn-grid>*:nth-child(3),.explore-grid>*:nth-child(3),.construct-grid>*:nth-child(3),.listen-grid>*:nth-child(3),.modes-grid>*:nth-child(3){grid-column:1/-1}.train-grid{grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr)}
 .card{height:auto;min-height:0;overflow:hidden}.statusbar{display:none}
 body.stage-focus #app{display:flex}body.stage-focus .mono-panel{min-height:calc(100dvh - 68px)}
}

/* Phone: theory first, optional instrument, vertical cards and bottom navigation. */
@media (max-width:700px){
 body{padding-bottom:calc(72px + var(--safe-bottom));background:#0c111b}
 .welcome-screen{padding:12px}.welcome-card{padding:24px 18px 20px;border-radius:19px}.welcome-brandline{flex-direction:column}.welcome-brandline img{width:72px;height:72px}.welcome-card h1{font-size:40px}.welcome-card>p#welcomeLead{font-size:14px;line-height:1.45}.welcome-actions{display:grid}.welcome-actions button{width:100%}.welcome-links{flex-direction:column;gap:10px}.welcome-foot{gap:10px;flex-wrap:wrap}
 .topbar{min-height:62px;padding:7px 8px;gap:7px}.brand{gap:9px}.brand-mark{width:46px;height:46px;flex:0 0 46px}.eyebrow,.subtitle,.brand-facts,.title-en{display:none}.title-line{display:block}.title-ar{font-size:20px;white-space:nowrap}.header-actions{gap:5px}.language-select{width:74px;height:42px;font-size:8px;padding:0 4px}.header-actions .view-switch,.header-actions .source-btn{display:none!important}.install-btn{width:42px;min-width:42px;height:42px;padding:0;font-size:0}.install-btn::before{content:"⇩";font-size:18px}.mobile-header-menu{width:42px;min-width:42px;height:42px;padding:0}
 .mono-panel{padding:6px 8px 10px;border-bottom-color:rgba(232,201,119,.18);background:linear-gradient(180deg,#0b1019,#151d2d)}
 .mono-caption{grid-template-columns:1fr 1fr;height:auto;padding:4px 2px 7px;font-size:7px}.mono-caption span:nth-child(2){display:none}.mono-caption span:last-child{text-align:right}
 .theory-hud{grid-template-columns:1.25fr 1fr 1fr 1fr;margin:0 0 5px;border-radius:9px}.hud-primary{grid-template-columns:31px 1fr}.hud-note{width:30px;height:30px;font-size:18px}.hud-primary small,.hud-model{display:none}.hud-metric span{font-size:5.8px}.hud-metric b{font-size:7px}
 .mono-scroll-shell{margin:0 -8px;padding:0 8px;scroll-snap-type:x proximity}.mono-scroll-shell::after{content:"Swipe to inspect the full theoretical string";position:sticky;left:10px;display:inline-block;margin:2px 0 5px;padding:4px 7px;border-radius:999px;background:rgba(12,15,24,.78);color:rgba(239,230,207,.38);font:600 6px/1 var(--mono)}
 #monoSvg{width:var(--mobile-theory-width);height:145px}.fret .label{font-size:17px}.fret .small-label{font-size:8px}.fret .dot{stroke-width:2}
 .mobile-stage-tools{display:flex;justify-content:center;align-items:center;gap:9px;margin:4px 0 2px}.mobile-stage-tools button{width:44px;height:38px;border-radius:8px;border:1px solid rgba(232,201,119,.18);background:rgba(255,255,255,.035);color:var(--parchment);font:700 18px/1 var(--mono)}.mobile-stage-tools span{min-width:48px;text-align:center;color:rgba(239,230,207,.48);font:700 8px/1 var(--mono)}
 .instrument-wrap{display:none;margin-top:0;padding-top:6px}.instrument-wrap #instrumentSvg{width:980px;height:125px}.mobile-instrument-toggle{display:block;width:100%;min-height:44px;margin-top:5px;border-radius:9px;border:1px solid rgba(169,78,57,.45);background:rgba(169,78,57,.08);color:#e6c797;font:700 9px/1 var(--mono)}body.mobile-instrument-open .instrument-wrap{display:block}body.mobile-instrument-open .mobile-instrument-toggle{background:rgba(169,78,57,.20)}
 body.view-practical .instrument-wrap{display:block}body.view-practical #monoSvg{height:50px;opacity:.22}body.view-practical .mono-scroll-shell{overflow:hidden}
 .tabs{display:none}.workspace{padding:10px 8px 20px;min-height:0}.workspace-context{display:none}
 .learn-grid,.explore-grid,.construct-grid,.listen-grid,.modes-grid,.train-grid{display:flex!important;flex-direction:column!important;gap:10px;height:auto!important}.learn-grid>*,.explore-grid>*,.construct-grid>*,.listen-grid>*,.modes-grid>*,.train-grid>*{width:100%;height:auto!important;min-height:0;grid-column:auto!important;order:initial}.card{overflow:visible;border-radius:12px}.card-head{min-height:44px;height:auto;padding:8px 11px}.card-title{font-size:14px}.card-kicker{font-size:7px}.btn{min-height:44px;height:auto;padding:9px 12px}.field select,.field input,.audio-mini select{min-height:44px}.lesson-list,.step-grid,.species-list{max-height:none!important;overflow:visible!important}.lesson-btn,.species-btn,.step-tile,.quiz-option{min-height:48px}.lesson-content,.concept-copy,.step-main,.sound-body,.builder-body,.modal-body,.quiz-body{height:auto!important;overflow:visible!important}.table-wrap{max-height:480px;overflow:auto}.data-card{overflow:hidden}.compare-body{grid-template-columns:1fr auto 1fr}.tone-box{padding:14px 5px}.tone-label{font-size:31px}.guide-visual{min-height:190px}#stopAudio{position:sticky;bottom:calc(76px + var(--safe-bottom));z-index:25}.statusbar{display:none}
 .mobile-pitch-bar{position:fixed;z-index:8100;left:8px;right:8px;bottom:calc(72px + var(--safe-bottom));display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:11px;border:1px solid rgba(232,201,119,.28);background:rgba(20,27,42,.96);box-shadow:0 12px 30px rgba(0,0,0,.38);backdrop-filter:blur(10px)}.mobile-pitch-bar[hidden]{display:none!important}.mobile-pitch-bar>div{display:flex;align-items:center;gap:10px;min-width:0}.mobile-pitch-bar b{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:rgba(232,201,119,.10);border:1px solid rgba(232,201,119,.28);font:700 20px/1 var(--display);color:var(--atlas-gold)}.mobile-pitch-bar span{font:700 8px/1.3 var(--mono);color:rgba(239,230,207,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-pitch-bar button{min-width:76px;height:38px;border-radius:8px;border:1px solid rgba(89,166,155,.48);background:rgba(89,166,155,.14);color:#dbeee8;font:700 9px/1 var(--mono)}
 .mobile-nav{position:fixed;z-index:8000;left:0;right:0;bottom:0;height:calc(66px + var(--safe-bottom));padding:5px 6px var(--safe-bottom);display:grid;grid-template-columns:repeat(6,1fr);gap:3px;background:rgba(12,16,25,.96);border-top:1px solid rgba(232,201,119,.18);backdrop-filter:blur(13px);box-shadow:0 -10px 30px rgba(0,0,0,.32)}.mobile-nav button{border:0;border-radius:9px;background:transparent;color:rgba(239,230,207,.45);display:grid;place-items:center;align-content:center;gap:4px;min-width:0}.mobile-nav button span{font:700 17px/1 var(--mono)}.mobile-nav button b{font:700 6.4px/1 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.mobile-nav button.active{color:var(--atlas-gold);background:linear-gradient(180deg,rgba(232,201,119,.12),rgba(232,201,119,.025))}.mobile-nav button.active span{color:var(--manuscript-red)}
 .sheet-grid{grid-template-columns:repeat(2,1fr)}.about-hero{grid-template-columns:70px 1fr;padding:12px}.about-hero img{width:70px;height:70px}.about-hero h3{font-size:20px}.scholar-dialog{width:calc(100vw - 14px);max-height:calc(100dvh - 24px);border-radius:16px}.dialog-content{padding:12px}
 .update-toast{bottom:calc(78px + var(--safe-bottom))}
 body.rtl-ui .mono-scroll-shell::after{left:auto;right:10px}
}

/* Embed mode for Google Sites or other iframes. */
body.embed-mode{padding-bottom:0}body.embed-mode .welcome-screen,body.embed-mode .install-btn,body.embed-mode .mobile-nav,body.embed-mode .family-link,body.embed-mode .eyebrow,body.embed-mode .presentation-hint{display:none!important}body.embed-mode #viewport{min-height:100dvh}body.embed-mode .topbar{position:relative;top:auto}body.embed-mode .tabs{top:0}body.embed-mode #app{min-height:100dvh}
@media (max-width:700px){body.embed-mode{padding-bottom:0}body.embed-mode .workspace{padding-bottom:10px}body.embed-mode .tabs{display:grid;position:relative;top:auto;grid-template-columns:repeat(6,minmax(125px,1fr));overflow-x:auto}}

@media (display-mode:standalone){.install-btn{display:none!important}body{overscroll-behavior-y:none}}
@media (prefers-reduced-motion:reduce){.welcome-screen,.sheet-panel,.sheet-scrim,.network-banner{transition:none!important}}
.update-toast[hidden]{display:none!important}

body.rtl-ui .welcome-card,body.rtl-ui .sheet-panel,body.rtl-ui .about-content{direction:rtl;text-align:right}body.rtl-ui .welcome-actions,body.rtl-ui .welcome-foot{direction:rtl}body.rtl-ui .mobile-pitch-bar>div{direction:rtl}.lesson-btn.completed::after{content:"✓";margin-inline-start:auto;color:var(--green);font:700 12px var(--mono)}


/* v4.1 — safe-area and phone-landscape presentation */
:root{--app-safe-top:max(env(safe-area-inset-top,0px),0px);--app-safe-right:max(env(safe-area-inset-right,0px),0px);--app-safe-bottom:max(env(safe-area-inset-bottom,0px),0px);--app-safe-left:max(env(safe-area-inset-left,0px),0px)}
html,body{min-height:100%;background:#0d121e}
body{padding-top:var(--app-safe-top);padding-right:var(--app-safe-right);padding-bottom:var(--app-safe-bottom);padding-left:var(--app-safe-left)}
body.welcome-visible{padding:0}
@media (display-mode:standalone){body:not(.welcome-visible){padding-top:max(env(safe-area-inset-top,0px),10px)}.topbar{padding-top:max(8px,env(safe-area-inset-top,0px))}.mobile-nav{padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}}
.orientation-gate{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:max(20px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));background:radial-gradient(circle at 50% 25%,rgba(169,78,57,.18),transparent 45%),#0d121e;color:#efe6cf;text-align:center}
.orientation-gate[hidden]{display:none!important}.orientation-card{width:min(390px,92vw);border:1px solid rgba(215,182,109,.45);border-radius:26px;padding:28px 24px;background:linear-gradient(160deg,#182238,#0c111d);box-shadow:0 28px 80px rgba(0,0,0,.48)}.orientation-card>img{width:72px;height:72px;border-radius:18px;margin-bottom:18px}.orientation-card h2{margin:12px 0 8px;color:#e9c66f;font:700 28px/1.05 var(--display)}.orientation-card p{margin:0 auto 20px;max-width:310px;color:rgba(239,230,207,.78);font:500 15px/1.55 var(--body)}.orientation-card button{min-height:48px;padding:0 22px;border-radius:14px;border:1px solid #d7b66d;background:linear-gradient(#e4bd68,#bd8731);color:#111827;font:700 15px var(--mono)}.rotate-phone{width:70px;height:48px;margin:0 auto;position:relative}.rotate-phone span{position:absolute;left:16px;top:8px;width:38px;height:56px;border:3px solid #d7b66d;border-radius:9px;transform:rotate(90deg);transform-origin:center}.rotate-phone:after{content:"↻";position:absolute;right:-4px;top:-7px;color:#59a69b;font:700 28px sans-serif}
body.orientation-blocked{overflow:hidden!important}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
 body{padding-top:max(env(safe-area-inset-top,0px),4px)}
 #app{min-height:100dvh}.topbar{min-height:58px;padding:6px max(12px,env(safe-area-inset-right,0px)) 6px max(12px,env(safe-area-inset-left,0px))}.brand-mark{width:48px;height:48px}.title-ar{font-size:20px}.title-en,.brand-meta,.eyebrow{display:none!important}.header-actions{gap:6px}.language-select{height:44px;min-width:108px}.mobile-header-menu{height:44px;width:44px}
 .mono-panel{min-height:auto;padding:4px 10px 8px;overflow:visible}.mono-scroll-shell{overflow:visible!important;margin:0!important;padding:0!important}.mono-scroll-shell::after{display:none!important}#monoSvg{display:block!important;width:100%!important;min-width:0!important;height:150px!important}.mono-stage{width:100%!important;min-width:0!important}.mono-hud{margin-bottom:2px}.mobile-theory-controls,.mobile-instrument-toggle{display:none!important}.instrument-wrap{display:none!important}.mobile-nav{height:60px}.workspace{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}.tabs{display:none!important}
}

@media (max-width:1100px){.brand-mark{width:50px!important;height:50px!important;flex-basis:50px!important;padding:3px!important}}
@media (max-width:700px){.brand-mark{width:46px!important;height:46px!important;flex-basis:46px!important;padding:3px!important}.mobile-nav{grid-template-columns:repeat(6,minmax(0,1fr))}.mobile-nav button b{font-size:6.2px}.fullscreen-compact{display:none!important}}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){.brand-mark{width:46px!important;height:46px!important;flex-basis:46px!important}.workspace{display:block!important;min-height:320px!important}.panel.active{display:block!important}.mobile-nav{display:grid!important}.mono-panel{min-height:0!important}}


/* v4.3 definitive phone-landscape application layout */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
  body{padding:0 0 calc(64px + env(safe-area-inset-bottom,0px)) 0!important;overflow-x:hidden!important;overflow-y:auto!important}
  #viewport,#app{width:100%!important;min-height:100dvh!important;height:auto!important;overflow:visible!important;transform:none!important}
  .topbar{position:sticky!important;top:0!important;z-index:9000!important;min-height:calc(58px + env(safe-area-inset-top,0px))!important;padding:max(6px,env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) 6px max(10px,env(safe-area-inset-left,0px))!important}
  .brand{min-width:0!important;gap:8px!important}.brand-mark{width:46px!important;height:46px!important;flex:0 0 46px!important}.brand-mark img{width:84%!important;height:84%!important}
  .title-ar{font-size:19px!important;max-width:56vw!important;overflow:hidden!important;text-overflow:ellipsis!important}.title-en,.brand-meta,.eyebrow,.subtitle,.brand-facts{display:none!important}
  .header-actions{margin-inline-start:auto!important;gap:5px!important}.header-actions .view-switch,.header-actions .source-btn,.header-actions .focus-btn,.header-actions .fullscreen-compact,.header-actions .install-btn{display:none!important}.mobile-header-menu{display:block!important;width:42px!important;min-width:42px!important;height:42px!important}.language-select{display:block!important;width:92px!important;min-width:92px!important;height:42px!important}
  .mono-panel{min-height:0!important;padding:4px 8px 8px!important;overflow:visible!important}.mono-scroll-shell{overflow:visible!important;margin:0!important;padding:0!important}.mono-stage,#monoSvg{width:100%!important;min-width:0!important}#monoSvg{height:150px!important}.instrument-wrap{display:none!important}.mobile-theory-controls,.mobile-instrument-toggle{display:none!important}
  .workspace{display:block!important;min-height:320px!important;padding:10px 8px calc(74px + env(safe-area-inset-bottom,0px))!important;overflow:visible!important}.panel.active{display:block!important}.tabs{display:none!important}
  .mobile-nav{position:fixed!important;z-index:10000!important;left:0!important;right:0!important;bottom:0!important;height:calc(64px + env(safe-area-inset-bottom,0px))!important;padding:5px max(6px,env(safe-area-inset-right,0px)) max(5px,env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))!important;display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;grid-auto-flow:column!important;gap:3px!important;background:rgba(12,16,25,.97)!important;border-top:1px solid rgba(232,201,119,.22)!important;box-shadow:0 -10px 30px rgba(0,0,0,.34)!important}
  .mobile-nav button{display:grid!important;width:auto!important;min-width:0!important;height:100%!important;place-items:center!important;align-content:center!important;gap:3px!important;padding:2px 3px!important;border:0!important;border-radius:8px!important;background:transparent!important;color:rgba(239,230,207,.52)!important}
  .mobile-nav button span{display:block!important;font:700 16px/1 var(--mono)!important}.mobile-nav button b{display:block!important;max-width:100%!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;text-align:center!important;font:700 7px/1.05 var(--mono)!important}.mobile-nav button.active{color:var(--atlas-gold)!important;background:linear-gradient(180deg,rgba(232,201,119,.13),rgba(232,201,119,.03))!important}
  .fullscreen-compact{display:none!important}
}