header {
  height:auto;
  min-height:66px;
  gap:14px;
  padding:6px 20px;
  flex-wrap:wrap
}
header nav {
  flex-shrink:0
}
.notice-shortcuts {
  display:block;
  flex:0 0 auto
}
.notice-shortcuts button {
  display:flex;
  align-items:center;
  justify-content:center;
  height:44px;
  font-size:14px;
  padding:0 14px;
  border-color:#c8d8e3;
  background:#f4f8fb;
  white-space:nowrap
}
.help-trigger-hint {
  display:none
}
.help-tabs {
  display:flex;
  gap:4px;
  overflow-x:auto;
  padding:8px 0 0;
  scrollbar-width:thin
}
.help-tabs button {
  flex-shrink:0;
  min-height:44px;
  border-radius:8px 8px 0 0;
  background:#edf3f7;
  border-bottom:0;
  white-space:nowrap;
  font-size:13px
}
.help-tabs button.active {
  background:#fff4c8;
  border:2px solid #dfa800;
  border-bottom:0;
  color:#163950;
  font-weight:750
}
.help-content {
  border:1px solid #c8d8e3;
  border-radius:0 0 9px 9px;
  padding:18px
}
.help-content > h3 {
  margin:0 0 16px;
  font-size:21px
}
.header-actions .version {
  display:none
}
.header-actions {
  font-size:12px;
  gap:5px
}
#guide-help {
  display:none!important
}
.notice-tabs {
  display:flex;
  gap:8px;
  margin-bottom:15px
}
.notice-tabs .active {
  background:#163950;
  color:white
}
.notice-pdf {
  display:inline-flex;
  flex-direction:column;
  gap:5px;
  padding:12px 16px;
  background:#fff4cc;
  border:1px solid #e6c463;
  border-radius:7px;
  color:#163950;
  font-weight:650;
  text-decoration:none
}
.notice-pdf small {
  font-weight:400
}
.notice-content {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:20px
}
.notice-content ol {
  margin:0;
  padding-left:23px;
  line-height:1.6
}
.notice-content li {
  margin-bottom:14px
}
.notice-content figure {
  margin:0;
  align-self:start
}
.notice-content img {
  width:100%;
  max-height:560px;
  object-fit:contain;
  background:white
}
.notice-content figcaption {
  font-size:12px;
  color:#60798b;
  margin-top:8px
}
.notice-context {
  background:#f0f5f8;
  padding:14px;
  border-radius:7px;
  line-height:1.55
}
#panel:has(.notice-sheet) {
  width:min(1000px,94vw)
}
@media(min-width:801px) {
  main {
    height:calc(100dvh - var(--header-height,66px))
  }
}
@media(max-width:1100px) {
  header {
    gap:9px
  }
  .brand small {
    display:none
  }
  .brand {
    font-size:16px
  }
  .header-actions {
    margin-left:auto
  }
}
@media(max-width:800px) {
  header {
    height:auto;
    align-items:center
  }
  .notice-shortcuts {
    order:0;
    margin-left:auto
  }
  .notice-shortcuts button {
    min-height:44px
  }
  .notice-content {
    grid-template-columns:1fr
  }
  .notice-content img {
    max-height:400px
  }
}
.card-add-all.tutorial-highlight {
  outline:3px solid #ff8b00;
  outline-offset:3px
}
.notice-image-zoom {
  display:block;
  position:relative;
  width:100%;
  padding:0;
  border:1px solid #d2dfe8;
  background:#fff;
  cursor:zoom-in;
  overflow:hidden
}
.notice-image-zoom:hover {
  border-color:#287bbd;
  background:#fff
}
.notice-zoom-hint {
  position:absolute;
  right:8px;
  bottom:8px;
  padding:5px 9px;
  border-radius:5px;
  background:#163950e8;
  color:white;
  font-size:12px;
  pointer-events:none
}
.notice-zoom {
  width:94vw;
  max-width:1500px;
  height:92dvh;
  max-height:92dvh;
  padding:0;
  border:1px solid #bbcfdc;
  border-radius:10px;
  overflow:hidden
}
.notice-zoom[open] {
  display:flex;
  flex-direction:column
}
.notice-zoom::backdrop {
  background:#102b43b3
}
.notice-zoom-toolbar {
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  flex-shrink:0;
  border-bottom:1px solid #ccdbe5;
  background:white
}
.notice-zoom-toolbar strong {
  margin-right:auto
}
.notice-zoom-toolbar output {
  min-width:54px;
  text-align:center;
  font-size:13px
}
.notice-zoom-scroll {
  flex:1;
  min-height:0;
  overflow:auto;
  padding:18px;
  background:#eaf0f5
}
.notice-zoom-scroll img {
  display:block;
  max-width:none;
  height:auto;
  margin:0 auto;
  background:white
}
.notice-zoom-toolbar button {
  min-width:36px
}
@media(max-width:600px) {
  .notice-zoom-toolbar {
    gap:4px;
    padding:8px
  }
  .notice-zoom-toolbar strong {
    font-size:12px
  }
  .notice-zoom-toolbar button {
    padding:7px
  }
  .notice-zoom-scroll {
    padding:10px
  }
}
.presenting-quiz .project-badge,.presenting-quiz .view-tools,.presenting-quiz .level-legend {
  visibility:hidden
}
.quiz-presentation {
  position:relative;
  flex-shrink:0;
  margin:12px;
  padding:14px;
  max-height:calc(100% - 140px);
  overflow:auto;
  border:2px solid #dfa800;
  border-radius:12px;
  background:#fff;
}
.quiz-presentation small {
  font-size:11px;
  font-weight:750;
  letter-spacing:1px;
  color:#617b8f
}
.quiz-presentation h2 {
  font-size:23px;
  margin:6px 0;
  color:#163950
}
.quiz-presentation p {
  line-height:1.6;
  font-size:14px;
  margin:8px 0
}
.quiz-presentation .note {
  font-size:12px;
  color:#627b8e
}
.quiz-presentation .intro-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  position:sticky;
  bottom:-14px;
  padding:10px 0;
  background:#fff;
  border-top:1px solid #e1e8ee
}
.quiz-presentation button {
  font-size:12px;
  width:100%;
  min-height:44px
}
.quiz-intro-catalogue > .catalogue-title,
.quiz-intro-catalogue > .search,
.quiz-intro-catalogue > .categories,
.quiz-intro-catalogue > .selection,
.quiz-intro-catalogue > .catalogue-foot,
.quiz-intro-catalogue .part-card:not(.intro-piece-focus) {
  display:none!important
}
.quiz-intro-catalogue .catalogue-items {
  min-height:110px
}
.presenting-quiz .scene-footer {
  visibility:hidden
}
@media(max-width:800px) {
  .workspace.presenting-quiz {
    height:42dvh;
    min-height:260px
  }
  .quiz-intro-catalogue .quiz-presentation {
    max-height:40dvh
  }
  .quiz-intro-catalogue .catalogue-items {
    flex:none;
    max-height:120px
  }
  .intro-catalogue-arrow {
    display:none
  }
  .quiz-presentation h2 {
    font-size:22px
  }
  .quiz-presentation p {
    font-size:12px
  }
}
.quiz-presentation .intro-requirements {
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:12px 0
}
.intro-requirements aside {
  padding:10px 12px;
  border:1px solid #e3bc54;
  border-left:4px solid #dfa800;
  border-radius:6px;
  background:#fff7dc
}
.intro-requirements strong {
  font-size:13px
}
.quiz-presentation .intro-requirements p {
  font-size:12px;
  line-height:1.45;
  margin:5px 0 0
}
@media(max-width:600px) {
  .quiz-presentation .intro-requirements {
    grid-template-columns:1fr;
    gap:7px
  }
}
.intro-piece-focus {
  border:2px solid #e9a400!important;
  background:#fff1a8!important;
  animation:introPiecePulse .8s ease-in-out infinite alternate
}
.intro-catalogue-arrow {
  position:fixed;
  z-index:12;
  color:#e9a400;
  font-size:38px;
  line-height:40px;
  pointer-events:none;
  animation:introArrow .8s ease-in-out infinite alternate;
  text-shadow:0 1px 2px white
}
@keyframes introArrow {
  from {
    transform:translateX(-12px)
  }
  to {
    transform:translateX(8px)
  }
}
@keyframes introPiecePulse {
  from {
    box-shadow:0 0 0 0 #ffca3870
  }
  to {
    box-shadow:0 0 0 6px #ffca3830
  }
}
@media(prefers-reduced-motion:reduce) {
  .intro-piece-focus,.intro-catalogue-arrow {
    animation:none
  }
}