:root { --sm-deep: #103e37; --sm-green: #356e57; --sm-leaf: #6f9e72; --sm-mist: #edf5df; --sm-cream: #fff9e9; --sm-sun: #f8c63f; --sm-coral: #c9503f; --sm-ink: #193d38; --sm-muted: #62766d; --sm-emoji: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; } .sm-page { margin: 0; color: var(--sm-ink); background: radial-gradient(circle at 12% 6%, rgba(248, 198, 63, .16), transparent 22rem), radial-gradient(circle at 91% 26%, rgba(111, 158, 114, .12), transparent 25rem), var(--sm-cream); } .sm-wrap { width: min(1320px, calc(100% - 40px)); margin: 22px auto 68px; } /* ---------- header ---------- */ .sm-header { position: relative; overflow: hidden; margin-bottom: 24px; padding: 34px 42px 38px; border-radius: 24px; background: linear-gradient(120deg, rgba(255, 255, 255, .04), transparent 36%), linear-gradient(135deg, #2a1f4a, #4a2d5e 55%, #b4542f); box-shadow: 0 24px 60px rgba(45, 30, 70, .22); color: #fffdf7; } .sm-header::after { position: absolute; right: 36px; bottom: -18px; content: '🎃👻🔐'; font-family: var(--sm-emoji); font-size: 4.2rem; letter-spacing: .1em; opacity: .22; transform: rotate(-8deg); } .sm-header-content { position: relative; z-index: 1; max-width: 820px; } .sm-header .back-btn { display: inline-flex; margin-bottom: 22px; } .sm-eyebrow { margin: 0; color: #ffe49a; font-size: .74rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; } .sm-header h1 { margin: 6px 0 10px; color: #fffdf7 !important; font-family: 'DM Serif Display', 'Noto Sans SC', serif; font-size: clamp(2rem, 4.3vw, 3.2rem); font-weight: 400; line-height: 1.06; } .sm-header-content > p:not(.sm-eyebrow) { max-width: 740px; margin: 0; color: rgba(255, 253, 247, .88); font-size: 1.05rem; line-height: 1.6; } .sm-hero-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .sm-hero-points span { padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: .8rem; font-weight: 900; } /* ---------- builder layout ---------- */ .sm-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(480px, 1.2fr); gap: 24px; align-items: start; } .sm-builder { display: grid; gap: 18px; } .sm-panel, .sm-preview-panel { border: 1px solid rgba(213, 203, 181, .9); border-radius: 19px; background: rgba(255, 253, 248, .95); box-shadow: 0 12px 34px rgba(40, 76, 62, .09); } .sm-panel { margin: 0; padding: 24px; } .sm-preview-panel { position: sticky; top: 18px; padding: 22px; } .sm-panel-heading { margin-bottom: 15px; } .sm-panel h2 { margin: 2px 0 0; color: var(--sm-deep); font-family: 'DM Serif Display', 'Noto Sans SC', serif; font-size: 1.4rem; font-weight: 400; line-height: 1.2; } .sm-kicker { margin: 0; color: var(--sm-green); font-size: .72rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; } .sm-step { display: grid; float: left; place-items: center; width: 32px; height: 32px; margin: 2px 11px 8px 0; border-radius: 10px; background: var(--sm-mist); color: #295a49; font-size: .9rem; font-weight: 900; } .sm-panel label { display: block; margin: 16px 0 8px; color: #2c4d43; font-size: .86rem; font-weight: 900; } .sm-panel label:first-of-type { margin-top: 0; } .sm-panel input[type="text"], .sm-panel select, .sm-panel textarea { box-sizing: border-box; width: 100%; padding: 12px 14px; border: 1px solid #cfd8ce; border-radius: 12px; background: #fff; color: var(--sm-ink); font: 700 1rem 'Nunito', 'Noto Sans SC', sans-serif; } .sm-panel textarea { min-height: 96px; resize: vertical; font-size: 1.1rem; line-height: 1.6; } .sm-panel input:focus, .sm-panel select:focus, .sm-panel textarea:focus { border-color: #4c8672 !important; outline: 0; box-shadow: 0 0 0 4px rgba(76, 134, 114, .12); } .sm-hint { margin: 6px 0 0; color: var(--sm-muted); font-size: .8rem; line-height: 1.45; } .sm-counter-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .sm-counter { flex: 0 0 auto; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: var(--sm-mist); color: var(--sm-green); font-size: .9rem; font-weight: 900; font-variant-numeric: tabular-nums; } .sm-counter.is-over { background: #fbe1dc; color: #a7342a; } /* theme picker */ .sm-theme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; } .sm-theme-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border: 1px solid #d8dfd4; border-radius: 13px; background: #fbfcf6; color: var(--sm-ink); font-family: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; } @media (hover: hover) and (pointer: fine) { .sm-theme-card:hover { transform: translateY(-2px); } } .sm-theme-card.is-active { border-color: var(--sm-leaf); background: var(--sm-mist); box-shadow: inset 0 0 0 1px var(--sm-leaf); } .sm-theme-icons { font-family: var(--sm-emoji); font-size: 1.25rem; letter-spacing: .05em; } .sm-theme-name { font-weight: 900; } .sm-theme-en { color: var(--sm-muted); font-size: .74rem; } .sm-segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid #d8dfd4; border-radius: 999px; background: #fbfcf6; } .sm-segmented button { padding: 8px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--sm-muted); font: 800 .86rem 'Nunito', 'Noto Sans SC', sans-serif; cursor: pointer; } .sm-segmented button.is-active { background: var(--sm-deep); color: #fff; } .sm-options { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; } .sm-options--spaced { margin-top: 18px; } .sm-check { display: flex !important; align-items: flex-start; gap: 10px; margin: 0 !important; color: var(--sm-ink) !important; cursor: pointer; } .sm-check input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--sm-green); } .sm-check span { font-weight: 800; } .sm-check span small { display: block; margin-top: 2px; color: var(--sm-muted); font-size: .78rem; font-weight: 500; } .sm-primary, .sm-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; font-family: inherit; font-weight: 900; cursor: pointer; transition: transform .15s, box-shadow .15s, filter .15s; } .sm-primary { width: 100%; margin-top: 20px; padding: 13px 18px; background: var(--sm-coral); box-shadow: 0 5px 0 #9d392f; color: #fffdf7; font-size: .98rem; } .sm-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #9d392f; } .sm-secondary { padding: 10px 15px; background: var(--sm-sun); box-shadow: 0 4px 0 #c89418; color: var(--sm-deep); font-size: .88rem; } .sm-secondary:active { transform: translateY(2px); box-shadow: 0 2px 0 #c89418; } @media (hover: hover) and (pointer: fine) { .sm-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 7px 0 #9d392f; } .sm-secondary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 0 #c89418; } } .sm-secondary:disabled { cursor: not-allowed; filter: grayscale(.65); opacity: .5; box-shadow: none; } /* ---------- preview ---------- */ .sm-preview-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .sm-status { min-height: 1.2em; margin: 0 0 14px; color: var(--sm-muted); font-size: .84rem; } .sm-status.is-error { color: #a7342a; font-weight: 800; } .sm-preview-panel { min-width: 0; } .sm-stage { position: relative; overflow: hidden; width: 100%; } /* Out of flow so the full-size sheet never widens the layout; fitPreview sets the stage height. */ .sm-stage .sm-sheets { position: absolute; top: 0; left: 0; } .sm-sheets { display: flex; flex-direction: column; gap: 10mm; width: max-content; transform-origin: top left; } /* ---------- the paper sheet (sized in real mm, scaled for preview) ---------- */ .sm-sheet { --sm-accent: #e2711d; --sm-accent-2: #5b2a86; --sm-tint: #fff4e8; position: relative; box-sizing: border-box; overflow: hidden; border-radius: 2mm; background: #fff; box-shadow: 0 10px 30px rgba(28, 65, 53, .16); color: #1d2b28; font-family: 'Nunito', 'Noto Sans SC', sans-serif; } .sm-theme-christmas { --sm-accent: #c0392b; --sm-accent-2: #1e7a46; --sm-tint: #f1f8f1; } .sm-theme-autumn { --sm-accent: #c8691c; --sm-accent-2: #7a4a1f; --sm-tint: #fdf4e3; } .sm-theme-newyear { --sm-accent: #c8102e; --sm-accent-2: #b8860b; --sm-tint: #fff3e6; } .sm-theme-everyday { --sm-accent: #2f8f83; --sm-accent-2: #356e57; --sm-tint: #eef7f3; } .sm-sheet::before { position: absolute; inset: 6mm; content: ''; border: .6mm solid var(--sm-accent); border-radius: 4mm; pointer-events: none; } .sm-deco { position: absolute; z-index: 1; padding: 0 1.5mm; background: #fff; font-family: var(--sm-emoji); font-size: 9mm; line-height: 1; } .sm-deco--0 { top: 2mm; left: 10mm; } .sm-deco--1 { top: 2mm; right: 10mm; } .sm-deco--2 { bottom: 2mm; left: 10mm; } .sm-deco--3 { bottom: 2mm; right: 10mm; } .sm-sheet-inner { position: absolute; inset: 13mm 14mm 11mm; display: flex; flex-direction: column; overflow: hidden; } .sm-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 6mm; } .sm-sheet-title { display: flex; align-items: center; gap: 3.5mm; min-width: 0; } .sm-sheet-badge { display: grid; flex: 0 0 auto; place-items: center; width: 13mm; height: 13mm; border-radius: 3.5mm; background: var(--sm-tint); font-family: var(--sm-emoji); font-size: 8mm; } .sm-sheet-kicker { margin: 0 0 .8mm; color: var(--sm-accent); font-size: 2.6mm; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .sm-sheet-head h3 { margin: 0; color: var(--sm-accent-2); font: 900 6.2mm/1.15 'Noto Sans SC', sans-serif; } .sm-student-meta { flex: 0 0 52mm; } .sm-meta-field { display: flex; align-items: flex-end; gap: 2mm; color: #4a5a55; font-size: 3mm; } .sm-meta-field + .sm-meta-field { margin-top: 2.5mm; } .sm-meta-field b { flex: 0 0 auto; font-weight: 800; } .sm-blank { flex: 1; height: 5mm; border-bottom: .3mm solid #6d7d77; } .sm-directions { margin: 4.5mm 0 4mm; padding: 2.4mm 3.5mm; border-radius: 2.5mm; background: var(--sm-tint); color: #3d4c47; font-size: 3.2mm; line-height: 1.45; } .sm-section-title { margin: 0 0 2.5mm; color: var(--sm-accent-2); font: 900 3.8mm 'Noto Sans SC', sans-serif; } .sm-key { padding: 3mm; border: .35mm solid #d9d3c4; border-radius: 3mm; } .sm-key-grid { display: grid; border-top: .3mm solid #9aa59f; border-left: .3mm solid #9aa59f; } .sm-key-cell { display: flex; flex-direction: column; align-items: center; border-right: .3mm solid #9aa59f; border-bottom: .3mm solid #9aa59f; } .sm-key-emoji { display: grid; place-items: center; width: 100%; height: 10mm; font-family: var(--sm-emoji); font-size: 6.4mm; line-height: 1; } .sm-key-char { display: grid; place-items: center; width: 100%; height: 7mm; border-top: .3mm dashed #b8c0bb; background: #fafaf6; font: 900 4.6mm 'Nunito', sans-serif; } .sm-key-char.is-han { font: 700 4.8mm 'Noto Sans SC', 'KaiTi', sans-serif; } .sm-puzzle { flex: 1 1 auto; margin-top: 5mm; } .sm-flow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 5mm 0; } .sm-group { display: inline-flex; flex-wrap: wrap; align-items: flex-end; margin-right: calc(var(--sm-cell) * .45); } .sm-break { flex-basis: 100%; height: 0; } .sm-cell { display: flex; flex-direction: column; align-items: center; width: var(--sm-cell); margin-right: 1.2mm; } .sm-cell-emoji { font-family: var(--sm-emoji); font-size: calc(var(--sm-cell) * .62); line-height: 1.15; } .sm-answer { position: relative; display: grid; place-items: center; box-sizing: border-box; width: calc(var(--sm-cell) * .9); height: calc(var(--sm-cell) * .9); margin-top: 1.2mm; } .sm-answer--line { height: calc(var(--sm-cell) * .62); border-bottom: .45mm solid #39463f; } .sm-answer--box { border: .4mm solid #59665f; border-radius: 1mm; } .sm-answer--tian { border: .4mm solid #c0392b; background: linear-gradient(#c0392b, #c0392b) center / 100% .15mm no-repeat, linear-gradient(#c0392b, #c0392b) center / .15mm 100% no-repeat; } .sm-answer--tian::before, .sm-answer--tian::after { position: absolute; inset: 0; content: ''; background: linear-gradient(to top right, transparent calc(50% - .1mm), rgba(192, 57, 43, .35) 50%, transparent calc(50% + .1mm)); } .sm-answer--tian::after { transform: scaleX(-1); } .sm-answer-text { position: relative; z-index: 1; visibility: hidden; color: #c0392b; font: 700 calc(var(--sm-cell) * .5) 'Noto Sans SC', 'KaiTi', sans-serif; } .sm-show-answers .sm-answer-text { visibility: visible; } .sm-punct { align-self: flex-end; margin: 0 1.2mm 0 -.4mm; font: 900 calc(var(--sm-cell) * .5) 'Noto Sans SC', sans-serif; line-height: 1; } .sm-placeholder { margin: 6mm 0; color: #8a958f; font-size: 3.6mm; } /* site-theme.css styles every