Frame style

shared/frame.css

.rosetta-frame { max-width: 1440px; margin: auto; }
.rosetta-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 2px 0 22px; border-bottom: 1px solid #dce3ee; }
.brand { font-size: 22px; font-weight: 750; text-decoration: none; color: #172642; }
.brand span { color: #1643c5; font-weight: 450; }
.lesson-intro { padding: 30px 0 20px; }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: #1643c5; font-weight: 700; }
.lesson-intro h1 { font-size: clamp(30px,4vw,42px); }
.lesson-intro > p:last-child { color: #58657a; font-size: 16px; }
.implementations { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.implementations a { padding: 8px 14px; border: 1px solid #dce3ee; border-radius: 6px; text-decoration: none; background: white; }
.implementations a[aria-current="page"] { background: #1643c5; color: white; border-color: #1643c5; }
.rosetta-layout { display: grid; grid-template-columns: minmax(0, 35%) minmax(0, 1fr); border: 1px solid #dce3ee; border-radius: 10px; overflow: hidden; background: white; }
.example-panel, .source-frame-panel { min-width: 0; }
.source-frame-panel { border-left: 1px solid #dce3ee; }
.rosetta-layout h2 { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin: 0; padding: 12px 18px; border-bottom: 1px solid #dce3ee; background: #fafbfe; }
.rosetta-layout h2 a { font-size: 12px; font-weight: normal; }
iframe { display: block; border: 0; width: 100%; height: 490px; }
@media (max-width: 700px) {
  .rosetta-header { flex-wrap: wrap; }
  .rosetta-layout { grid-template-columns: 1fr; }
  .source-frame-panel { border-left: 0; border-top: 1px solid #dce3ee; }
  .example-panel iframe { height: 170px; }
  .source-frame-panel iframe { height: 490px; }
}

.master-layout { display: grid; grid-template-columns: 215px minmax(0, 1fr); gap: 28px; }
.master-content { min-width: 0; }
.lesson-tree { border-right: 1px solid #dce3ee; padding: 30px 18px 24px 0; }
.lesson-tree nav { display: block; }
.lesson-tree details { margin-bottom: 24px; }
.lesson-tree summary { cursor: pointer; font-weight: 700; padding: 5px 0; color: #172642; }
.lesson-tree ul { list-style: none; padding: 0 0 0 14px; margin: 10px 0 0 5px; border-left: 1px solid #dce3ee; }
.lesson-tree li { margin: 3px 0; }
.lesson-tree a { display: block; padding: 7px 9px; border-radius: 5px; text-decoration: none; color: #58657a; font-size: 13px; }
.lesson-tree a:hover { background: #eaf0fa; }
.lesson-tree a[aria-current=page] { color: #1643c5; background: #e7edfc; font-weight: 650; }
.overview-prose { max-width: 780px; line-height: 1.7; padding-bottom: 40px; }
.overview-prose h2 { margin-top: 25px; }
.overview-prose p { color: #58657a; }
.start-lesson { display: inline-block; margin-top: 18px; font-weight: 650; }
.overview-source { border: 1px solid #dce3ee; border-radius: 10px; overflow: hidden; }
.overview-source iframe { height: 620px; }
@media (max-width: 900px) {
  .master-layout { grid-template-columns: 170px minmax(0, 1fr); gap: 16px; }
  .master-content .rosetta-layout { grid-template-columns: 1fr; }
  .master-content .source-frame-panel { border-left: 0; border-top: 1px solid #dce3ee; }
  .master-content .example-panel iframe { height: 170px; }
}
@media (max-width: 600px) {
  .master-layout { grid-template-columns: 1fr; gap: 0; }
  .lesson-tree { border-right: 0; border-bottom: 1px solid #dce3ee; padding: 14px 0 0; }
  .lesson-tree nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* Compact navigation and adjustable desktop panes. */
.master-layout { grid-template-columns: clamp(140px, var(--tree-width, 195px), 35vw) 8px minmax(0, 1fr); gap: 10px; }
.lesson-tree { border-right: 0; padding-top: 22px; padding-right: 0; }
.lesson-tree details { margin-bottom: 15px; }
.lesson-tree summary { padding: 2px 0; }
.lesson-tree ul { margin-top: 5px; padding-left: 8px; }
.lesson-tree li { margin: 0; }
.lesson-tree a { padding: 3px 8px; line-height: 1.45; }
.rosetta-layout { grid-template-columns: minmax(0, var(--live-width, 35%)) 8px minmax(0, 1fr); }
.source-frame-panel { border-left: 0; }
.splitter { position: relative; cursor: col-resize; touch-action: none; background: transparent; min-height: 30px; }
.splitter::after { content: ''; position: absolute; inset: 0 3px; background: #dce3ee; border-radius: 3px; }
.splitter:hover::after, .splitter:focus-visible::after { background: #7093dc; }
.example-splitter { background: #f5f7fb; }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing iframe { pointer-events: none; }
.example-tools { padding: 2px 16px 8px; }
.inspector-tool { border: 0; background: transparent; opacity: .65; cursor: pointer; padding: 3px 5px; font-size: 15px; border-radius: 4px; }
.inspector-tool:hover, .inspector-tool:focus-visible { opacity: 1; background: #edf1f8; }
@media (max-width: 900px) {
  .example-splitter { display: none; }
  .master-content .rosetta-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .master-layout { grid-template-columns: 1fr; gap: 0; }
  .tree-splitter { display: none; }
  .lesson-tree { padding-top: 12px; }
}

.example-tools { padding: 4px 12px 0; }
.source-frame-panel { background: #f3f5f8; }

.important-info { margin: 0 0 24px; padding: 18px 20px; background: #eaf1ff; border: 1px solid #c5d7fa; border-left: 4px solid #1643c5; border-radius: 6px; color: #193768; }
.important-info strong { font-size: 17px; }
.important-info p { margin: 8px 0 0; line-height: 1.6; }
.inspector-tool { font: 12px/1.5 system-ui, sans-serif; color: #58657a; }

.lesson-note { margin-top:20px; padding:14px 0; border-top:1px solid #dce3ed; max-width:900px; }
.lesson-note h2 { margin:0 0 7px; font-size:15px; }
.lesson-note p { margin:0; font-size:14px; line-height:1.6; color:#53627a; }

.lesson-comparison { margin-top:0; border-top:0; padding-top:4px; }

#install-app { margin-left:auto; padding:5px 10px; border:1px solid #c9d3e5; border-radius:5px; background:white; color:#1d3eb1; font:600 12px system-ui; cursor:pointer; }
#install-app[hidden] { display:none; }