:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}

.room{padding:0}
.surface{padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}

:root{--app-frame-height:100dvh}
#app{height:var(--app-frame-height)}
@media(orientation:portrait){html[data-ios-home-screen]{--app-frame-height:var(--root-height,100vh)}}
button.primary{border:1px solid #d1b580;border-radius:10px;background:linear-gradient(125deg,#ddc18e,#bb965e);box-shadow:inset 0 1px 0 #f5e4bf50,0 2px 4px #061e1940;font-weight:500;line-height:1.25}
button:is(.quiet,.outline,.text-button){border:1px solid var(--control-line,#8d9b8052);border-radius:10px;background:transparent;color:var(--ink);box-shadow:none;font-weight:500;line-height:1.25}
button:is(.quiet,.text-button){border-color:transparent}
@media(hover:hover) and (pointer:fine){button.primary:hover{background:#e4c99a}button:is(.quiet,.outline,.text-button):hover{background:#244333;border-color:#9eab805c}}
button:is(.primary,.quiet,.outline,.text-button):active{box-shadow:inset 0 2px 4px #082b2426;transform:translateY(1px)}

.tile-flight{position:fixed;z-index:15;pointer-events:none;filter:drop-shadow(2px 8px 5px #05251b70)}
.tile-flight .tile{width:100%;height:100%;transform:none}

.save-progress{width:min(100%,320px);display:grid;gap:8px;color:var(--ink);font-size:.82rem;text-align:center}
.save-progress[hidden]{display:none}.save-progress progress{width:100%;height:8px;appearance:none;border:0;border-radius:6px;overflow:hidden;background:#1b4b3e;accent-color:#ecd8ad}
.save-progress progress::-webkit-progress-bar{background:#1b4b3e;border-radius:6px}.save-progress progress::-webkit-progress-value{background:#ecd8ad;border-radius:6px}.save-progress progress::-moz-progress-bar{background:#ecd8ad;border-radius:6px}

@media(min-width:900px) and (min-height:551px){
 .phase-observe .teaching-table:not(.has-table-demo){display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:center;gap:16px 24px}
}

html[data-platform=android] button:not(.tile){min-width:48px;min-height:48px}
html[data-expanded-text=true] dialog{width:calc(100vw - 32px);max-width:900px}

html[data-expanded-text=true] .lesson-hud{height:auto}
html[data-expanded-text=true] .lesson-hud>span{display:none}
html[data-expanded-text=true] .phase-observe .teaching-table:not(.has-table-demo){display:flex;flex-direction:column;justify-content:flex-start}
html[data-expanded-text=true] .notice{font-size:.6rem}

.display-details{margin-top:20px;border-top:1px solid #82988660}.display-details summary{min-height:48px;padding:14px 0;cursor:pointer;color:var(--sand)}.display-details dl{margin:16px 0}.display-details dt{font-weight:500;margin-top:12px}.display-details dd{margin:3px 0 0;overflow-wrap:anywhere;color:#dce6d4;font-variant-numeric:tabular-nums}

.tile-flight.public-flight .tile-solid text{display:none}

.surface>.notice{position:relative;inset:auto;transform:none;flex:0 0 auto;align-self:stretch;width:auto;max-width:none;max-height:24vh;margin:0 12px;padding:8px 12px;border:1px solid #c8b98c;border-radius:6px;background:#efe1c2;color:#183f34;box-shadow:none;font-size:14px;line-height:1.4;overflow:auto;overflow-wrap:anywhere;pointer-events:auto;z-index:auto}
html[data-expanded-text=true] .surface>.notice{font-size:16px}
.surface:has(>.notice:not(:empty))>main{min-height:0;overflow:auto}