#timetable-view{min-width:0}
.timetable{--ink:#3d3045;--muted:#68576e;--paper:rgba(255,252,253,.83);container-type:inline-size;color:var(--ink);padding:clamp(12px,2.3vw,32px);padding-bottom:clamp(100px,14vw,200px);isolation:isolate;position:relative;overflow:hidden;border-radius:22px;background:radial-gradient(ellipse at 12% 8%,#fff3e8 0%,transparent 33%),linear-gradient(145deg,#e4d9ef,#ffe7e8 38%,#ebe0f3 75%,#fce5d9);border:1px solid #eddfec}
.timetable::before,.timetable::after{position:absolute;pointer-events:none;content:"";z-index:-1;left:0;right:0;background:url('/campus-dusk.jpg') center bottom/cover no-repeat}
.timetable::before{height:155px;top:0;opacity:.28;background-position:50% 18%;mask-image:linear-gradient(#000,transparent)}
.timetable::after{height:clamp(200px,23vw,340px);bottom:0;mask-image:linear-gradient(transparent,#000 45%)}
.tt-hero{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px clamp(4px,2vw,28px) 19px}
.tt-name h1{font-family:"Songti SC","STSong","Noto Serif CJK SC",serif;font-size:clamp(30px,5.6vw,62px);line-height:1.06;letter-spacing:.07em;color:#382a3f;margin:0;font-weight:700}
.tt-name h1 span{color:#a44d76;font:400 .8em Georgia,serif;vertical-align:.02em;padding-left:.04em}
.tt-name i{display:block;color:#8b667b;font:italic clamp(18px,2.8vw,32px) "Snell Roundhand","Apple Chancery",Georgia,serif;letter-spacing:.035em;margin-top:3px}
.tt-meta{display:grid;justify-items:end;gap:7px;font-size:13px}
.tt-week,.tt-school{display:flex;align-items:center;gap:8px;border-radius:22px;padding:4px 12px;border:1px solid #fffc}
.tt-week{background:#795d88;color:white;font-weight:600;font-variant-numeric:tabular-nums}
.tt-week select{font:inherit;border:none;color:inherit;background:transparent;padding:4px;cursor:pointer}
.tt-week option{color:#382a3f;background:#fff}
.tt-school{background:#fff8;color:#584157}
.tt-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;margin:0 3px 8px}
.tt-controls details{width:100%}.tt-controls details[open]{border-radius:12px;background:var(--paper);padding:10px 14px}
.tt-controls summary{width:fit-content;cursor:pointer;color:#694b73;font-weight:600}
.tt-controls p{margin:.4em 0}.tt-controls input{max-width:100%;font:inherit}
.tt-controls [role=status]:empty{display:none}
.tt-scroll{background:#fff9;overflow:auto;border:2px solid #fffd;border-radius:16px;padding:6px;box-shadow:0 6px 22px #9169871a;overscroll-behavior-x:contain}
.tt-grid{border-spacing:3px;table-layout:fixed;width:100%;min-width:580px;isolation:isolate;font-size:13px}
.tt-grid th,.tt-grid td{border-radius:6px;background:rgba(241,230,244,.70);overflow-wrap:anywhere}
.tt-grid thead th{background:linear-gradient(135deg,#b393c3,#9678a9);color:#fff;padding:9px 2px;font-size:15px;letter-spacing:.06em;text-align:center}
.tt-grid thead th:first-child{width:90px;font-size:13px;letter-spacing:0}
.tt-grid th small{display:block;font-size:11px;line-height:1.3;font-weight:500;letter-spacing:0}
.tt-grid tbody tr{height:44px}.tt-grid .tt-period{position:sticky;left:0;z-index:1;background:#f4eaf4;text-align:center;color:#524056;font-size:18px;line-height:1.3}
.tt-grid .tt-period small{color:var(--muted);font-size:10px}
.tt-grid td{padding:0;vertical-align:middle}
.tt-grid .tt-filled{background:#ffffff38;position:relative;height:1px}
.tt-course{appearance:none;display:block;width:100%;height:100%;min-height:42px;text-align:left;padding:9px clamp(4px,1vw,13px);border:1px solid #fffc;border-radius:8px;color:#352c40;font:inherit;line-height:1.35;cursor:pointer}
.tt-course+.tt-course{height:auto;margin-top:2px}
.tt-course strong{display:block;font-size:clamp(12px,1.1vw,16px);font-weight:690}.tt-course small{display:block;margin-top:5px;font-size:clamp(10px,.92vw,12px);color:#564656}
.tt-course:hover,.tt-course:focus-visible{box-shadow:inset 0 0 0 2px #886792}
.tt-course.lilac{background:#dfd2f3}.tt-course.blue{background:#cee4f6}.tt-course.rose{background:#f5cfde}.tt-course.peach{background:#f6ddc8}.tt-course.mint{background:#d3e6df}.tt-course.periwinkle{background:#dadcf5}
.tt-grid .tt-lunch{background:#f6e4e5;text-align:center;color:#80616a;font-size:13px;font-weight:600}
.tt-lunch span{display:flex;align-items:center;justify-content:center;gap:15px}.tt-lunch span::before,.tt-lunch span::after{content:"";border-top:1px solid #c4a4ab;width:18%}
.tt-grid tr:has(.tt-lunch){height:28px}
.tt-notes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 6px 0}
.tt-note{padding:clamp(12px,2vw,21px);border-radius:15px;background:var(--paper);border:1px solid #fffd;box-shadow:0 3px 14px #9e798820;min-width:0}
.tt-note h3{margin:0;font-size:17px;letter-spacing:.025em}.tt-note h3::before{content:"✎";margin-right:8px;color:#9a576d}.tt-note-head h3::before{content:"☑"}
.tt-note p,.tt-empty{font-size:13px;line-height:1.6;color:var(--muted);white-space:pre-line;overflow-wrap:anywhere}
.tt-note-head,.tt-todo{display:flex;align-items:center;gap:7px}.tt-note-head{justify-content:space-between}.tt-note-head>span,.tt-range{font-size:11px;color:var(--muted)}
.tt-todo{min-height:32px;border-bottom:1px solid #e4d5e1;font-size:13px}.tt-todo small{margin-left:auto}.tt-todo input{accent-color:#906784}
.tt-detail{border:1px solid #e8d8e6;border-radius:18px;color:var(--ink);padding:22px;max-width:min(90vw,420px);background:#fff8fc}.tt-detail::backdrop{background:#34243570}
.tt-detail h2{margin:0 0 8px}.tt-detail p{margin:.55em 0;overflow-wrap:anywhere}
.tt-extra{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px}
@container(max-width:610px){.tt-grid{min-width:530px}.tt-grid thead th:first-child{width:55px}.tt-grid thead th{font-size:13px}.tt-hero{padding:6px 3px 12px}.tt-week,.tt-school{padding:3px 7px}.tt-meta{font-size:11px}.tt-notes{margin:12px 0 0;gap:8px}.tt-note h3{font-size:15px}.tt-scroll{padding:2px}}
@container(max-width:370px){.tt-hero{flex-wrap:wrap}.tt-meta{display:flex;flex-wrap:wrap;align-items:center}.tt-notes{grid-template-columns:1fr}}
.tt-zoom{display:none}
@container(max-width:610px){
 .tt-scroll:not(.tt-enlarged) .tt-grid{min-width:0;border-spacing:2px}
 .tt-scroll:not(.tt-enlarged) .tt-grid thead th:first-child{width:36px;font-size:10px}
 .tt-scroll:not(.tt-enlarged) .tt-grid th small{font-size:10px}
 .tt-scroll:not(.tt-enlarged) .tt-course{font-size:11px;padding:4px 2px}
 .tt-scroll:not(.tt-enlarged) .tt-course strong{font-size:11px}
 .tt-scroll:not(.tt-enlarged) .tt-course small{font-size:10px;line-height:1.3}
 .tt-zoom{display:block;margin:4px 0 0 auto;border:0;background:none;color:#674e74;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px;font-size:12px}
}
@container(max-width:370px){
 .tt-hero{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px}
 .tt-name h1{font-size:27px}.tt-name i{font-size:18px}
 .tt-meta{display:grid;gap:4px;justify-items:end}.tt-week,.tt-school{padding:2px 5px;font-size:10px}.tt-week{gap:3px}
 .tt-notes{grid-template-columns:1fr 1fr}.tt-note{padding:10px}.tt-note h3{font-size:13px}.tt-note p{font-size:12px}
}
@container(max-width:300px){.tt-hero,.tt-notes{grid-template-columns:1fr}.tt-meta{justify-items:start}}

.tt-grid .tt-time-range{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 .22em;margin-top:3px;font-variant-numeric:tabular-nums}
.tt-time-range span{white-space:nowrap}
@container(max-width:610px){
 .tt-grid .tt-period{font-size:13px}
 .tt-grid .tt-time-range{flex-direction:column}
}