:root {
  --navy: #10243E; --navy2: #1B3A5C; --teal: #0E7C86; --teal-dk: #0A6570;
  --amber: #F4A100; --bg: #EEF2F6; --line: #DCE5EC; --txt: #1A2433;
  --mut: #64748B; --red: #B03A5B; --green: #2E7D32;
  --surface: #fff;                       /* 卡片／表格的底色，和 --bg 分層 */
  --surface-2: #F7F9FB;                  /* 表格斑馬紋等次一階的底 */
  /* 兩層陰影：近距離的細邊 + 遠距離的柔散，比單層立體 */
  --shadow: 0 1px 2px rgba(16, 36, 62, .06), 0 4px 12px -4px rgba(16, 36, 62, .10);
  --shadow-lg: 0 2px 4px rgba(16, 36, 62, .06), 0 12px 28px -8px rgba(16, 36, 62, .16);
  --radius: 14px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: "Microsoft JhengHei", "PingFang TC", "Segoe UI", sans-serif;
       background: var(--bg); color: var(--txt); line-height: 1.6;
       -webkit-font-smoothing: antialiased; }

/* 鍵盤操作時焦點要看得見；滑鼠點擊不顯示（:focus-visible 的用途） */
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

/* 跳至主要內容：平常收起來，用 Tab 鍵移到它時才出現 */
.skiplink { position: absolute; left: -9999px; top: 8px; z-index: 100;
            background: var(--teal); color: #fff; padding: 10px 18px;
            border-radius: 8px; text-decoration: none; font-weight: 700; }
.skiplink:focus { left: 12px; }

/* 數字用等寬字身，表格上下對得齊 */
td, th, .pnum, .minibar + *, .solvedcell { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* transition 要「整個關」，不能只把 duration 壓短：transition-property
     預設是 all，只壓 duration 等於讓每一次 inline style 變更都開一場
     微型轉場——而轉場在層疊裡贏過 inline !important。CodeMirror 靠
     inline style 排版（sizer 的 margin-left），被卡在轉場起點 0，
     行號欄整個疊到程式碼上（2026-08-19 實測，只有開「減少動態」的
     使用者會中）。animation 維持壓短即可，沒有同樣的層疊問題。 */
  *, *::before, *::after { animation-duration: .01ms !important;
                           animation-iteration-count: 1 !important;
                           transition: none !important; }
}

/* ---------- navbar ---------- */
nav { position: sticky; top: 0; z-index: 20;
      display: flex; justify-content: space-between; align-items: center; gap: 12px;
      background: linear-gradient(180deg, var(--navy) 0%, #0C1C31 100%);
      border-bottom: 3px solid var(--teal);
      padding: 10px 28px; box-shadow: 0 2px 8px rgba(16, 36, 62, .25); }
nav .brand { color: #fff; font-weight: 700; font-size: 18px; text-decoration: none;
             display: flex; align-items: center; gap: 10px; white-space: nowrap; }
nav .brand img { height: 32px; width: auto; display: block; }
nav .brand span { color: #8FA6BA; font-weight: 400; font-size: 14px; margin-left: 4px; }
nav .links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
nav .links a { color: #C9D6E2; text-decoration: none; font-size: 14.5px;
               padding: 7px 12px; border-radius: 7px; transition: background .15s, color .15s; }
nav .links a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
nav .links a.active { color: #fff; background: rgba(14, 124, 134, .35);
                      box-shadow: inset 0 -2px 0 var(--teal); }
nav .links .cta { background: var(--teal); color: #fff; font-weight: 700; }
nav .links .cta:hover { background: var(--teal-dk); }
nav .who { color: var(--amber) !important; font-size: 14px; }

main { max-width: 1080px; margin: 28px auto; padding: 0 20px; }
main.wide { max-width: 1340px; }   /* 題目頁：題敘與編輯器並排 */
footer { text-align: center; color: var(--mut); font-size: 13px; padding: 36px 0 24px; }

/* ---------- typography ---------- */
h1 { color: var(--navy); font-size: 27px; margin: 8px 0 18px; letter-spacing: .01em; }
h2 { color: var(--navy); font-size: 19px; margin: 30px 0 10px;
     padding-left: 11px; border-left: 5px solid var(--teal); }
h3 { color: var(--navy); font-size: 16.5px; margin: 18px 0 8px; }
a { color: var(--teal); }
.hint { color: var(--mut); font-size: 13.5px; line-height: 1.5; }
.mono, .desc code { font-family: "Cascadia Code", Consolas, "Courier New", monospace; }

/* ---------- cards / flash ---------- */
.card { background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--radius); padding: 20px 24px; margin-bottom: 18px;
        box-shadow: var(--shadow); }
.flash { background: #FFF8E8; border-left: 5px solid var(--amber);
         padding: 12px 18px; border-radius: 10px; margin-bottom: 16px;
         box-shadow: var(--shadow); }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: separate; border-spacing: 0;
        background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--radius); box-shadow: var(--shadow);
        overflow: hidden; margin: 10px 0 6px; }
th { background: var(--navy); color: #fff; padding: 11px 14px; font-size: 13px;
     text-align: left; font-weight: 600; letter-spacing: .04em; }
td { padding: 10px 14px; font-size: 14px; border-top: 1px solid var(--line); }
tr:first-child td { border-top: none; }
tbody tr:nth-child(even) td, tr:nth-child(even) td { background: var(--surface-2); }
tr:hover td { background: #E8F2F3; }
a.plink { color: var(--navy); text-decoration: none; font-weight: 600; }
a.plink:hover { color: var(--teal); }
.diff { color: var(--amber); font-size: 13px; letter-spacing: 1px; }

/* ---------- badges ---------- */
.badge { display: inline-block; padding: 3px 12px; border-radius: 20px;
         font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
         line-height: 1.5; white-space: nowrap;
         box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.badge.AC    { background: #DDF0DE; color: var(--green); }
.badge.TRIED { background: #FBE9CE; color: #A97600; }
.badge.none  { background: #E9EEF3; color: var(--mut); }
.badge.WA, .badge.ERR { background: #F6DDE3; color: var(--red); }
.badge.CE  { background: #E5E9EE; color: #44505F; }
.badge.TLE { background: #FBE9CE; color: #A97600; }

/* ---------- problem page ---------- */
.desc { white-space: pre-wrap; line-height: 1.7; font-size: 15px; }
.desc code { background: #EEF3F6; padding: 1px 6px; border-radius: 4px; font-size: .92em; }
textarea.code { width: 100%; min-height: 380px; font-family: "Cascadia Code", Consolas, monospace;
                font-size: 14.5px; line-height: 1.55; background: #17293D; color: #EAF1F8;
                border: 1px solid #0C1C31; border-radius: 10px; padding: 16px 18px;
                tab-size: 4; resize: vertical; box-shadow: var(--shadow); }
textarea.code:focus { outline: 2px solid var(--teal); outline-offset: 1px; }

button, .btn { background: var(--teal); color: #fff; border: none; border-radius: 10px;
               padding: 11px 28px; font-size: 15.5px; font-weight: 700; cursor: pointer;
               font-family: inherit; line-height: 1.4;
               transition: background .15s, transform .06s, box-shadow .15s;
               box-shadow: 0 1px 2px rgba(10, 101, 112, .25),
                           0 4px 10px -3px rgba(10, 101, 112, .35); }
button:hover, .btn:hover { background: var(--teal-dk);
               box-shadow: 0 2px 4px rgba(10, 101, 112, .28),
                           0 8px 16px -4px rgba(10, 101, 112, .42); }
button:active { transform: translateY(1px); }
button:disabled { background: #8A97A5; cursor: wait; transform: none;
                  box-shadow: none; }
.btn-sm { background: var(--teal); color: #fff; padding: 4px 13px; border-radius: 6px;
          text-decoration: none; font-size: 13px; font-weight: 600; }
.btn-sm:hover { background: var(--teal-dk); }
.h2actions { float: right; display: flex; gap: 8px; align-items: center; }

/* 給螢幕閱讀器用的標籤：畫面上看不到，但讀得出來 */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px;
                   padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0;
                   white-space: nowrap; }

/* ---------- 批改列表 ----------
   用 grid 而不是 table：每一列要是獨立的 <form>，而 HTML 不允許
   <form> 直接放在 <tr> 底下（剖析器會把它丟掉，欄位就送不出去）。 */
.gradelist { background: var(--surface); border: 1px solid var(--line);
             border-radius: var(--radius); box-shadow: var(--shadow);
             overflow: hidden; margin: 10px 0 22px; }
.gradehead, .graderow {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: 56px minmax(120px, 1.1fr) minmax(160px, 1.6fr)
                         88px minmax(140px, 1.6fr) 74px;
}
.gradehead { background: var(--navy); color: #fff; font-size: 13px;
             font-weight: 600; letter-spacing: .04em; padding: 11px 14px; }
.graderow { padding: 10px 14px; border-top: 1px solid var(--line); font-size: 14px; }
.graderow:hover { background: var(--surface-2); }
.graderow .gno { font-weight: 700; }
.graderow .gradeby { grid-column: 2 / -1; font-size: 12.5px; margin-top: -2px; }

.scorebox, .commentbox { font-family: inherit; font-size: 14px; padding: 6px 10px;
                         border: 1.5px solid var(--line); border-radius: 8px;
                         background: var(--surface); color: var(--txt); }
.scorebox { width: 100%; text-align: center; font-variant-numeric: tabular-nums; }
.commentbox { width: 100%; }
.scorebox:focus, .commentbox:focus { outline: none; border-color: var(--teal); }

@media (max-width: 900px) {
  /* 窄螢幕改成一列一張卡，欄位堆疊 */
  .gradehead { display: none; }
  .graderow { grid-template-columns: 56px 1fr; row-gap: 8px; }
  .graderow .gradeby { grid-column: 1 / -1; }
}
.btn-sm-ghost { background: transparent; color: var(--mut);
                border: 1.5px solid var(--line); }
.btn-sm-ghost:hover { background: transparent; color: var(--teal);
                      border-color: var(--teal); }

.result { border-radius: 10px; padding: 14px 18px; margin-top: 16px; box-shadow: var(--shadow); }
.result.AC  { background: #E4F3E5; border-left: 6px solid var(--green); }
.result.WA, .result.ERR { background: #F9E4E9; border-left: 6px solid var(--red); }
.result.CE  { background: #EEF1F4; border-left: 6px solid #64748B; }
.result.TLE { background: #FBE9CE; border-left: 6px solid var(--amber); }
.result pre { white-space: pre-wrap; font-size: 13px; max-height: 260px; overflow-y: auto;
              background: rgba(255, 255, 255, .65); padding: 12px; border-radius: 8px;
              font-family: "Cascadia Code", Consolas, monospace; }

/* ---------- forms ---------- */
form.auth { max-width: 400px; margin: 44px auto; }
/* 單一登入按鈕：與本站帳密表單並存時要一眼看到，所以佔滿整行。
   樣式走 Material 3 的 filled button：pill 圓角、實心底、hover 抬一層
   elevation、點下去有 ripple。只改這顆，其他 .btn 維持原樣。 */
.btn-sso { display: block; text-align: center; margin: 4px 0 10px;
           /* .btn 沒有重設 text-decoration，<a> 會吃到瀏覽器預設的底線 */
           text-decoration: none;
           border: none;                       /* 不要任何邊框／左側線條 */
           border-radius: 999px;               /* Material 的 filled button 是全圓角 */
           padding: 13px 28px; letter-spacing: .02em;
           position: relative; overflow: hidden;   /* ripple 要被裁在按鈕裡 */
           /* elevation level 1 */
           box-shadow: 0 1px 2px rgba(10, 101, 112, .30),
                       0 1px 3px 1px rgba(10, 101, 112, .15);
           transition: background .15s, box-shadow .2s; }
.btn-sso:hover { background: var(--teal-dk);
           /* elevation level 2 */
           box-shadow: 0 1px 2px rgba(10, 101, 112, .30),
                       0 2px 6px 2px rgba(10, 101, 112, .18); }
.btn-sso:active { transform: none; }           /* 蓋掉 button 的下壓，改用 ripple 表現 */

/* Ripple：平常是「已擴散且透明」，:active 時瞬間縮回中心並轉亮（transition 0s），
   放開手指回到預設值就自己擴散淡出。純 CSS，不用 JS。
   偏好減少動態的使用者會被檔案開頭的 prefers-reduced-motion 規則關掉。 */
.btn-sso::after { content: ""; position: absolute; left: 50%; top: 50%;
           width: 240px; height: 240px; margin: -120px 0 0 -120px;
           border-radius: 50%; background: rgba(255, 255, 255, .40);
           opacity: 0; transform: scale(1); pointer-events: none;
           transition: transform .5s ease-out, opacity .7s ease-out; }
.btn-sso:active::after { opacity: 1; transform: scale(0); transition: 0s; }
form.auth hr { border: none; border-top: 1px solid var(--ln, #D7DEE6);
               margin: 18px 0 12px; }
form.auth h1 { margin-top: 0; }
form.auth label { font-size: 14px; color: #44505F; font-weight: 700; }
form.auth input { width: 100%; padding: 10px 13px; margin: 6px 0 15px; font-size: 15px;
                  border: 1.5px solid var(--line); border-radius: 8px; font-family: inherit;
                  transition: border-color .15s; }
form.auth input:focus { outline: none; border-color: var(--teal); }
form.auth input:disabled { background: #F1F4F7; color: var(--mut); }
select, input[type=file] { font-family: inherit; font-size: 15px; padding: 8px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

details { margin: 16px 0; }
details summary { cursor: pointer; color: var(--mut); font-size: 14px;
                  padding: 6px 0; user-select: none; }
details summary:hover { color: var(--teal); }

/* ---------- filter bar ---------- */
.filterbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
             margin: 18px 0 6px; }
.filterbar input[type=search] { flex: 1; min-width: 220px; padding: 9px 14px;
             font-size: 14.5px; font-family: inherit; border: 1.5px solid var(--line);
             border-radius: 9px; background: #fff; color: var(--txt); }
.filterbar input[type=search]:focus { outline: none; border-color: var(--teal); }
.chips { display: flex; gap: 6px; }
.chip { background: #fff; color: var(--mut); border: 1.5px solid var(--line);
        border-radius: 99px; padding: 7px 16px; font-size: 13.5px; font-weight: 600;
        box-shadow: none; }
.chip:hover { background: #EDF5F6; color: var(--teal); }
.chip.active { background: var(--teal); color: #fff; border-color: var(--teal); }

/* ---------- progress / scoreboard ---------- */
.progress-card { display: flex; align-items: center; gap: 26px; }
.pnum { font-size: 34px; font-weight: 700; color: var(--teal); line-height: 1.1;
        white-space: nowrap; }
.pnum span { font-size: 19px; color: var(--mut); font-weight: 400; }
.pnum .hint { font-size: 13px; font-weight: 400; margin-top: 2px; }
.pbar { flex: 1; height: 12px; background: #E3EAF1; border-radius: 99px; overflow: hidden; }
.pbar span { display: block; height: 100%; border-radius: 99px;
             background: linear-gradient(90deg, var(--teal), #3FA535); transition: width .4s; }
.catcount { float: right; font-size: 13.5px; color: var(--mut); font-weight: 400;
            padding-top: 4px; }
tr.row-ac td:first-child { box-shadow: inset 3px 0 0 var(--green); }
tr.row-me td { background: #FFF6E0 !important; font-weight: 600; }
.metag { background: var(--amber); color: #fff; font-size: 11px; font-weight: 700;
         padding: 1px 7px; border-radius: 20px; margin-left: 7px; vertical-align: 1px; }
/* 排行榜的解題數：數字旁邊補一條小長條，一眼看得出彼此差距 */
.solvedcell { white-space: nowrap; }
.minibar { display: inline-block; width: 92px; height: 7px; border-radius: 99px;
           background: #E3EAF1; margin-left: 10px; vertical-align: 1px; overflow: hidden; }
.minibar span { display: block; height: 100%; border-radius: 99px;
                background: linear-gradient(90deg, var(--teal), #3FA535); }
.rank { display: inline-block; min-width: 24px; text-align: center; font-weight: 700; }
.rank.r1 { color: #B8860B; } .rank.r2 { color: #6B7785; } .rank.r3 { color: #A0522D; }
.deadline { border-left: 5px solid var(--amber); }

/* ---------- 題目工作區：左題敘 + 右編輯器 ---------- */
.phead { display: flex; align-items: baseline; justify-content: space-between;
         gap: 16px; flex-wrap: wrap; }
.phead h1 { margin: 8px 0 14px; display: flex; align-items: center; gap: 10px;
            flex-wrap: wrap; }
.backlink { font-size: 14px; text-decoration: none; white-space: nowrap; }
.work { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
        gap: 20px; align-items: start; }
/* 題敘跟著捲動——寫程式時不用來回捲頁看題目 */
.workside { position: sticky; top: 78px; max-height: calc(100vh - 100px);
            overflow: auto; overscroll-behavior: contain; }
.workside .card { margin-bottom: 14px; }
.workside h3 { margin: 0 0 8px; }
.workmain { min-width: 0; }
.histtable { box-shadow: none; margin: 0; }
.histtable th { font-size: 12.5px; padding: 6px 10px; }
.histtable td { font-size: 13px; padding: 5px 10px; }

/* ---------- editor / misc ---------- */
/* 高度跟著視窗走：小筆電不會把「送出」擠到畫面外，大螢幕也不浪費空間 */
.CodeMirror { height: clamp(340px, calc(100vh - 310px), 660px);
              border-radius: 10px; font-size: 14.5px; line-height: 1.55;
              font-family: "Cascadia Code", Consolas, monospace; box-shadow: var(--shadow); }
.CodeMirror-focused { outline: 2px solid var(--teal); outline-offset: 1px; }
/* 黏在畫面底部，捲到哪裡都按得到 */
/* 背景要不透明——半透明的話編輯器的程式碼會透出來疊在按鈕上 */
.submitbar { position: sticky; bottom: 0; z-index: 5;
             margin-top: 12px; padding: 12px 0 14px;
             background: var(--bg); box-shadow: 0 -12px 14px -8px var(--bg);
             display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.kbd { font-family: "Cascadia Code", Consolas, monospace; font-size: 12px;
       color: var(--mut); border: 1px solid var(--line); border-bottom-width: 2px;
       border-radius: 6px; padding: 3px 8px; background: rgba(255, 255, 255, .6);
       white-space: nowrap; }
.btn-ghost { background: transparent; color: var(--mut); border: 1.5px solid var(--line);
             box-shadow: none; font-weight: 600; padding: 9px 16px; font-size: 14px; }
.btn-ghost:hover { background: transparent; color: var(--teal); border-color: var(--teal); }
.reccopy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
           margin: 0 0 12px; }
.spin { display: inline-block; width: 13px; height: 13px; vertical-align: -2px;
        border: 2px solid #C7D3DC; border-top-color: var(--teal); border-radius: 50%;
        animation: spin .7s linear infinite; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.reccode { font-family: "Cascadia Code", Consolas, monospace; font-size: 30px;
           letter-spacing: 6px; text-align: center; font-weight: 700; color: var(--navy);
           background: #EEF3F6; border: 2px dashed var(--teal);
           border-radius: 10px; padding: 16px; margin: 14px 0; }
.codeview { background: #17293D; color: #EAF1F8; padding: 16px 18px; border-radius: 10px;
            font-family: "Cascadia Code", Consolas, monospace; font-size: 13.5px;
            line-height: 1.55; white-space: pre-wrap; overflow-x: auto;
            box-shadow: var(--shadow); }
td form { margin: 0; }

/* ---------- dark mode ---------- */
@media (prefers-color-scheme: dark) {
  :root { --bg: #0E151D; --line: #2A3844; --txt: #E4EAF0; --mut: #94A3B3;
          --navy: #16283F; --surface: #17222E; --surface-2: #1B2733;
          --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px -4px rgba(0, 0, 0, .55);
          --shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 28px -8px rgba(0, 0, 0, .6); }
  body { background: var(--bg); color: var(--txt); }
  h1, h2, h3 { color: #DCE7F2; }
  .card, table { background: var(--surface); border-color: var(--line); }
  th { background: #10243E; color: #E4EAF0; }
  td { border-top-color: var(--line); }
  tbody tr:nth-child(even) td, tr:nth-child(even) td { background: var(--surface-2); }
  tr:hover td { background: #22313F; }
  .badge { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
  a.plink { color: #CFE3F5; }
  .flash { background: #2B2415; color: #F2E4C8; }
  .badge.none { background: #26313D; color: var(--mut); }
  .badge.CE { background: #26313D; color: #B7C4D1; }
  .result.AC { background: #16301A; }
  .result.WA, .result.ERR { background: #341A22; }
  .result.CE { background: #202A35; }
  .result.TLE { background: #33290F; }
  .result pre { background: rgba(0, 0, 0, .25); }
  .desc code, .reccode { background: #202C3A; }
  .reccode { color: #DCE7F2; }
  form.auth input { background: #17222E; color: var(--txt); border-color: var(--line); }
  form.auth input:disabled { background: #131C25; }
  form.auth label { color: #BCC9D6; }
  .pbar, .minibar { background: #26313D; }
  tr.row-me td { background: #33290F !important; }
  .filterbar input[type=search], .chip { background: #17222E; border-color: var(--line);
                                         color: var(--txt); }
  .chip { color: var(--mut); }
  .chip.active { background: var(--teal); color: #fff; }
  .chip:hover { background: #1F303D; }
  .kbd { background: rgba(0, 0, 0, .25); }
  .btn-ghost { color: var(--mut); border-color: var(--line); }
}

/* ---------- mobile ---------- */
@media (max-width: 1000px) {
  /* 螢幕不夠寬就改成上下排。display:contents 讓題敘與提交紀錄變成獨立項目，
     才能排成「題敘 → 編輯器 → 提交紀錄」——紀錄夾在中間會把編輯器擠到很下面 */
  .work { grid-template-columns: 1fr; }
  .workside { display: contents; }
  .workside .desc { order: 1; }
  .workmain { order: 2; }
  .workside .histcard { order: 3; margin-top: 6px; }
}

@media (max-width: 760px) {
  nav { padding: 8px 12px; flex-wrap: wrap; gap: 6px; }
  nav .brand { font-size: 15px; gap: 8px; }
  nav .brand img { height: 24px; }
  nav .brand span { display: none; }
  /* 連結擠成一列可橫向滑動，省下一整排的高度 */
  nav .links { flex-wrap: nowrap; overflow-x: auto; width: 100%;
               scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  nav .links::-webkit-scrollbar { display: none; }
  nav .links a { font-size: 13.5px; padding: 6px 10px; white-space: nowrap; }
  main { margin: 18px auto; padding: 0 12px; }
  main.wide { max-width: 100%; }
  .grid2 { grid-template-columns: 1fr; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  textarea.code { min-height: 300px; font-size: 13.5px; }
  .CodeMirror { height: clamp(300px, calc(100vh - 330px), 520px); font-size: 13.5px; }
  .phead h1 { font-size: 22px; }
  .workside .desc { max-height: 42vh; overflow: auto; }
}