/* A single visual system renders both miniature previews and actual notices. */
.notice-surface {
  --surface-bg:#fff; --surface-ink:#28343c; --surface-muted:#8c969e;
  --mark-bg:#e9f0f2; --mark-ink:inherit;
  background:var(--surface-bg); color:var(--surface-ink); position:relative; isolation:isolate;
}
.notice-surface.theme-simple {--surface-bg:#fff;--surface-ink:#25313b;--surface-muted:#8e99a1;--mark-bg:#e8eef1;}
.notice-surface.theme-dark {--surface-bg:#19212e;--surface-ink:#f0f4fa;--surface-muted:#8997ad;--mark-bg:#31465a;--mark-ink:#c8e6ed;}
.notice-surface.theme-fresh {--surface-bg:#eff6f0;--surface-ink:#385d4e;--surface-muted:#8ba894;--mark-bg:#d4e8d7;}
.notice-surface.theme-cute {--surface-bg:#fff0ee;--surface-ink:#88545e;--surface-muted:#c38f96;--mark-bg:#f8d7cd;}
.notice-surface.theme-journal {--surface-bg:#faf5e9;--surface-ink:#675843;--surface-muted:#aa997d;--mark-bg:#f1df9e;}
.notice-surface.theme-felt {--surface-bg:#ede3d2;--surface-ink:#69513c;--surface-muted:#ad967a;--mark-bg:#d9e0c4;}
.notice-surface :is(.screen-message,.board-text) {position:relative;z-index:1;}
.notice-surface mark {background:var(--mark-bg);color:var(--mark-ink);box-shadow:none;}
.notice-surface :is(.screen-room,.screen-badge,.board-topline,.board-bottomline) {color:var(--surface-muted);opacity:1;z-index:1;}
.notice-surface .board-confirm {position:relative;z-index:1;color:var(--surface-ink);border-color:color-mix(in srgb,var(--surface-ink) 18%,transparent);background:color-mix(in srgb,var(--surface-bg) 90%,white);}
.notice-surface .speech-warning {z-index:2;}
.notice-decor {position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit;z-index:0;}
.notice-decor span {position:absolute;display:block;}
.notice-surface > img {z-index:1;}
/* Simple: precise typography and a single fine accent. */
.decor-simple .decor-one {width:7%;height:2px;left:46.5%;top:24%;background:#b3c1c5;}
.decor-simple .decor-two {height:1px;width:14%;bottom:19%;left:43%;background:#e2e8eb;}
/* Dark: quiet blue ambient light, subtle corner geometry. */
.theme-dark .notice-decor {background:radial-gradient(ellipse at 100% 0,#33486466,transparent 55%);}
.decor-dark .decor-one {width:34%;aspect-ratio:1;right:-17%;top:-28%;border:1px solid #7891ac26;border-radius:50%;}
.decor-dark .decor-two {width:24%;aspect-ratio:1;right:-12%;top:-19%;border:1px solid #7891ac26;border-radius:50%;}
.decor-dark .decor-three {height:2px;width:9%;bottom:22%;left:45.5%;background:#779caa55;}
.theme-dark .screen-message,.theme-dark .board-text {font-weight:500;}
/* Fresh: foliage kept outside the reading area. */
.decor-fresh .decor-one {width:22%;height:40%;right:-7%;top:-14%;border-radius:70% 20% 65% 30%;background:#d3e5d3;transform:rotate(-30deg);}
.decor-fresh .decor-two {width:14%;height:31%;right:8%;top:-19%;border-radius:70% 20% 65% 30%;background:#dfeade;transform:rotate(28deg);}
.decor-fresh .decor-three {width:23%;height:36%;left:-10%;bottom:-15%;border-radius:60% 25% 65% 30%;background:#d9e7d5;transform:rotate(35deg);}
.decor-fresh .decor-four {width:11%;height:22%;left:8%;bottom:-13%;border-radius:70% 15% 60% 30%;background:#e2ead7;transform:rotate(-30deg);}
/* Cute: soft clouds, a tiny heart and a star; no artwork under the text. */
.decor-cute .decor-one {width:28%;height:12%;right:-6%;top:7%;background:#fffaf6;border-radius:50px;box-shadow:-12px -8px 0 -2px #fffaf6;}
.decor-cute .decor-two {width:22%;height:10%;left:-7%;bottom:13%;background:#fffaf6;border-radius:50px;box-shadow:12px -8px 0 -1px #fffaf6;}
.decor-cute .decor-three {width:7%;aspect-ratio:1;left:9%;top:15%;background:#f1c3c2;clip-path:polygon(50% 15%,65% 0,85% 0,100% 20%,100% 45%,50% 100%,0 45%,0 20%,15% 0,35% 0);transform:rotate(-12deg);}
.decor-cute .decor-four {width:6%;aspect-ratio:1;right:12%;bottom:11%;background:#eccc83;clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 36%);transform:rotate(12deg);}
.theme-cute .screen-message,.theme-cute .board-text {font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif;font-weight:600;}
/* Journal: ruled paper, punched margin and paper tape. */
.theme-journal .notice-decor {background-image:linear-gradient(#9f977213 1px,transparent 1px);background-size:100% 27px;}
.decor-journal .decor-one {width:18%;height:9%;top:4%;left:41%;background:#d4be8f66;transform:rotate(-5deg);border-inline:3px dotted #faf5e9aa;}
.decor-journal .decor-two {top:7%;bottom:7%;left:6%;width:1px;background:#c3a38944;}
.decor-journal .decor-three {height:68%;width:4px;left:2.5%;top:16%;background:radial-gradient(circle,#c0b39a 1.5px,transparent 2px) 0 0/4px 22px;}
.decor-journal .decor-four {width:9%;aspect-ratio:1;right:0;bottom:0;background:linear-gradient(135deg,transparent 49%,#e7ddc7 50%);}
.theme-journal .screen-message,.theme-journal .board-text {font-family:"KaiTi","STKaiti","Microsoft YaHei",serif;font-weight:600;}
/* Felt: tactile fibers, an inset stitched seam and softly layered leaves. */
.theme-felt .notice-decor {background-image:radial-gradient(ellipse at 1px 1px,#ffffff66 .6px,transparent 1px),radial-gradient(ellipse at 2px 3px,#8f76501a .5px,transparent 1px);background-size:4px 5px,5px 4px;}
.theme-felt .notice-decor:before {content:'';position:absolute;inset:5%;border:1px dashed #bba486;border-radius:7px;box-shadow:0 0 0 5px #fff3,0 0 0 6px #c4b19433;}
.decor-felt .decor-one {width:16%;height:24%;left:-3%;bottom:2%;background:#a7b28d;border-radius:70% 25% 65% 25%;transform:rotate(-25deg);box-shadow:inset 2px 2px 5px #e0e8c980,2px 3px 4px #665c3e24;}
.decor-felt .decor-two {width:12%;height:19%;left:7%;bottom:-6%;background:#c8b382;border-radius:70% 25% 65% 25%;transform:rotate(20deg);box-shadow:inset 2px 2px 4px #f1ddb880,2px 3px 4px #665c3e22;}
.decor-felt .decor-three {width:12%;aspect-ratio:1;right:7%;top:4%;border-radius:50%;background:#cc9d85;box-shadow:inset 2px 2px 4px #ebc4a7aa,2px 3px 4px #68533925;}
.decor-felt .decor-four {width:5%;aspect-ratio:1;right:10.5%;top:8%;border-radius:50%;background:#ebd5ad;box-shadow:inset 1px 1px 2px #f8e7cf,1px 2px 3px #76633d2b;}
.theme-felt .screen-message,.theme-felt .board-text {text-shadow:0 1px 0 #ffffffb3;}
/* Always-visible template selector, separate from saved text snippets. */
.notice-template-picker {margin:0 0 22px;}
.template-picker-label {display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.template-picker-label .field-label {margin:0;}
.template-picker-label small {font-size:10px;color:#99a3ad;}
.notice-theme-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.notice-theme-button {padding:4px;border:1px solid #e5e9ec;border-radius:8px;background:#fff;text-align:left;min-width:0;transition:border-color .15s,box-shadow .15s;position:relative;}
.notice-theme-button:hover {border-color:#b8cdc6;}
.notice-theme-button.active {border-color:#6f9e90;box-shadow:0 0 0 1px #6f9e9022;}
.notice-theme-button .selected-tick {display:none;position:absolute;top:7px;right:7px;z-index:3;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#27766a;color:#fff;box-shadow:0 0 0 2px #fff;}
.notice-theme-button .selected-tick .icon {width:11px;height:11px;}
.notice-theme-button.active .selected-tick {display:flex;}
.template-mini {aspect-ratio:1.6;border-radius:5px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.template-mini-text {position:relative;z-index:1;text-align:center;line-height:1.9;font-size:11px;font-weight:600;letter-spacing:1px;white-space:nowrap;}
.template-mini-text small {display:block;font-size:7px;font-weight:400;letter-spacing:1px;color:var(--surface-muted);}
.template-mini .decor-simple .decor-one {top:19%;}
.template-mini .decor-simple .decor-two {bottom:15%;}
.template-mini.theme-journal .notice-decor {background-size:100% 13px;}
.template-mini .decor-journal .decor-three {background-size:4px 11px;}
.template-mini.theme-felt .notice-decor:before {border-radius:4px;box-shadow:none;}
.notice-theme-label {display:flex;justify-content:space-between;align-items:center;padding:6px 4px 3px;font-size:11px;color:#626f7b;}
.notice-theme-label small {font-size:8px;color:#a1aab3;}
.notice-theme-button.active .notice-theme-label {color:#3a7766;}
.theme-summary-name {color:#7a8c84;}
@media(min-width:761px){.compose-grid>.preview-col{position:sticky;top:22px;}}
/* On actual classroom screens decoration stays modest and text stays large. */
.notice-overlay.notice-surface {position:fixed;}
.notice-overlay .notice-decor {position:absolute;}
.notice-overlay.notice-surface:not(.banner) .board-text {max-width:min(1050px,82vw);}
.notice-overlay.theme-journal .notice-decor {background-size:100% 64px;}
.notice-overlay.theme-journal .decor-journal .decor-three {background-size:5px 50px;width:5px;}
.notice-overlay.theme-felt .notice-decor:before {border-width:2px;inset:4%;border-radius:18px;}
.notice-overlay.theme-felt .decor-felt .decor-three {width:7%;right:7%;top:7%;}
.notice-overlay.theme-felt .decor-felt .decor-four {width:3%;right:9%;top:10%;}
.notice-overlay.banner .notice-decor {opacity:.65;}
.notice-overlay.banner .board-topline {position:relative;}
.notice-overlay.banner.theme-journal .notice-decor {background-size:100% 25px;}
@media(max-width:520px){
  .notice-theme-grid {gap:7px;}
  .notice-theme-button {padding:3px;}
  .template-mini {aspect-ratio:1.35;}
  .template-mini-text {font-size:10px;letter-spacing:0;}
  .template-mini-text small {font-size:6px;}
  .notice-theme-label {font-size:10px;padding:5px 2px 2px;}
  .notice-theme-label small {display:none;}
  .notice-template-picker {margin-bottom:20px;}
  .notice-overlay.notice-surface:not(.banner) .board-text {max-width:87vw;}
}
@media(max-width:430px){
  .notice-theme-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .template-mini {aspect-ratio:1.7;}
  .compose-grid .two-col {grid-template-columns:1fr;gap:15px;}
  .choice {white-space:nowrap;}
}

/* Refined classroom typography and composition. */
.priority-field {margin:0 0 22px;}
.priority-field input {font-size:12px;}
.priority-field .field-help {font-size:10px;}
.notice-surface {
  --accent:#237d71;--accent-soft:#e7f2ed;
  --surface-ink:#29323b;
  text-rendering:optimizeLegibility;
}
.notice-surface.theme-dark {--accent:#a3e3ea;--accent-soft:#29444e;--surface-ink:#f0f3f9;--surface-bg:#17212e;}
.notice-surface.theme-fresh {--accent:#28816b;--accent-soft:#dcece0;--surface-ink:#334f44;--surface-bg:#f1f7f1;}
.notice-surface.theme-cute {--accent:#d8687d;--accent-soft:#fae0df;--surface-ink:#664849;--surface-bg:#fff7f2;}
.notice-surface.theme-journal {--accent:#a87837;--accent-soft:#f3e6b9;--surface-ink:#554938;--surface-bg:#fbf7eb;}
.notice-surface.theme-felt {--accent:#8e634a;--accent-soft:#dfd6b3;--surface-ink:#624e3e;--surface-bg:#f0e8d9;}
.notice-content {position:absolute;inset:26% 9% 24%;display:flex;align-items:center;justify-content:center;z-index:1;min-width:0;}
.notice-copy {width:100%;flex:0 0 100%;text-align:center;line-height:1.5;font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif;font-weight:700;letter-spacing:0;white-space:normal;overflow-wrap:normal;word-break:normal;}
.notice-unit {display:inline-block;white-space:pre;vertical-align:baseline;}
.notice-copy mark {font-size:1.16em;font-weight:800;line-height:1;background:none!important;color:var(--accent)!important;box-shadow:none!important;border-radius:0;padding:0 .015em;}
.notice-heading {position:absolute;left:8%;top:10%;z-index:1;display:flex;align-items:center;gap:.5em;color:var(--surface-ink);font-size:clamp(10px,1vw,15px);font-weight:650;letter-spacing:.06em;line-height:1.2;}
.heading-rule {width:3px;height:1em;background:var(--accent);border-radius:2px;}
.notice-meta {position:absolute;bottom:10%;left:9%;right:9%;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:clamp(7px,.65vw,11px);color:var(--surface-muted);z-index:1;}
.notice-brand {font-size:.9em;letter-spacing:.1em;opacity:.8;}
.classroom-screen.notice-surface {padding:0;}
.notice-surface:not(.theme-journal) .decor-simple .decor-one {display:none;}
.theme-simple .notice-decor:before {content:'';position:absolute;inset:5%;border:1px solid #e6eaed;border-radius:2px;}
.theme-simple .decor-simple .decor-two {bottom:7%;width:4%;height:2px;left:48%;background:#dce5e5;}
.theme-simple .notice-heading {top:11%;}
.theme-dark .notice-decor {background:radial-gradient(ellipse at 90% 5%,#31445970,transparent 55%),linear-gradient(120deg,#17212e,#1b2938);}
.theme-dark .notice-decor:after {content:'';position:absolute;inset:5%;border:1px solid #b1cce315;border-radius:3px;}
.theme-dark .decor-dark .decor-three {width:5%;height:1px;background:#9cbccd55;bottom:11%;left:47.5%;}
.theme-fresh .notice-decor:after {content:'';position:absolute;inset:6%;border:1px solid #9ab29e55;border-radius:12px 2px 12px 2px;}
.theme-fresh .decor-fresh .decor-one {width:13%;height:30%;right:-3%;top:-8%;background:linear-gradient(100deg,#cbdcc8,#dfeadb);}
.theme-fresh .decor-fresh .decor-two {width:9%;height:19%;right:7%;top:-8%;background:#e0ead9;}
.theme-fresh .decor-fresh .decor-three {width:14%;height:24%;left:-5%;bottom:-8%;background:linear-gradient(160deg,#d9e7cf,#c9d9c4);}
.theme-fresh .decor-fresh .decor-four {width:8%;height:16%;left:6%;bottom:-8%;}
/* The cute template uses a framed card and original hand-drawn sticker. */
.theme-cute .notice-decor {background:radial-gradient(circle at 14% 21%,#f4d3c9 0 2px,transparent 2.5px),radial-gradient(circle at 86% 77%,#e5c4c7 0 2px,transparent 2.5px);}
.theme-cute .notice-decor:before {content:'';position:absolute;inset:4.5%;border:2px solid #edb9b1;border-radius:12px;background:#fffaf6;box-shadow:0 0 0 5px #fae8e3,inset 0 0 0 3px #fff;}
.theme-cute .notice-decor:after {content:'';position:absolute;inset:6.5%;border:1px dashed #e4b6ae;border-radius:8px;}
.theme-cute .notice-heading {left:10%;top:12%;color:#965b63;}
.theme-cute .heading-rule {background:#db8c95;width:5px;border-radius:5px;}
.theme-cute .notice-content {inset:28% 11% 27%;}
.theme-cute .notice-meta {left:24%;right:12%;bottom:12%;}
.cute-sticker {position:absolute;width:19%;height:auto;left:1%;bottom:0;z-index:1;transform:rotate(-8deg);}
.decor-cute .decor-one {display:none;}
.decor-cute .decor-two {display:none;}
.decor-cute .decor-three {width:3%;left:auto;right:12%;top:11%;background:#dca0a3;transform:rotate(12deg);z-index:1;}
.decor-cute .decor-four {width:3.5%;right:6%;bottom:16%;background:#dfbf82;z-index:1;}
/* A quieter paper notebook with margin, tape and date-label styling. */
.theme-journal .notice-decor {background-image:repeating-linear-gradient(0deg,transparent 0 22px,#a69c7d16 22px 23px);}
.theme-journal .notice-decor:before {content:'';position:absolute;inset:5%;border:1px solid #b8a88955;}
.theme-journal .decor-journal .decor-one {top:2%;height:8%;width:19%;left:40.5%;background:repeating-linear-gradient(45deg,#d0bc8c55 0 3px,#d0bc8c33 3px 6px);}
.theme-journal .notice-copy {font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif;}
.theme-journal .notice-heading {border:1px solid #b9a28266;padding:.25em .5em;color:#887355;left:9%;top:10%;}
.theme-journal .heading-rule {display:none;}
/* Smaller felt appliqués with embroidery details and a less busy fiber texture. */
.theme-felt .notice-decor {background-image:radial-gradient(ellipse at 1px 1px,#fff5 .45px,transparent .8px),radial-gradient(ellipse at 2px 3px,#8f765012 .4px,transparent .8px);background-size:3px 5px,5px 4px;}
.theme-felt .notice-decor:before {inset:5%;border:1px dashed #b59d7e;box-shadow:0 0 0 4px #ffffff36,0 0 0 5px #c4b19422;}
.decor-felt .decor-one {width:12%;height:24%;left:-4%;bottom:-1%;background:linear-gradient(120deg,#b5be9c,#9fab85);border:1px solid #91a07766;}
.decor-felt .decor-one:after,.decor-felt .decor-two:after {content:'';position:absolute;inset:12%;border:1px dashed #f0f2d899;border-radius:inherit;}
.decor-felt .decor-two {width:8%;height:16%;left:5%;bottom:-4%;background:linear-gradient(110deg,#d6c49b,#c7af80);border:1px solid #b29a7666;}
.decor-felt .decor-three {width:9%;right:7%;top:5%;background:linear-gradient(120deg,#d8af99,#c6937b);border:1px dashed #f5d3bd;box-shadow:0 0 0 2px #cda48f,2px 3px 4px #68533925;}
.decor-felt .decor-four {width:3.4%;right:9.8%;top:8%;background:#e8d5ac;border:1px dashed #c5ae84;}
.theme-felt .notice-copy {text-shadow:0 1px 0 #fff9;}
.theme-felt .heading-rule {width:5px;border-radius:5px;background:#a6b18e;box-shadow:1px 1px 1px #88795422;}
/* Miniatures show the user's actual text using the same layout engine. */
.template-mini {aspect-ratio:1.6;container-type:inline-size;}
.template-mini .notice-content {inset:27% 9% 22%;}
.template-mini .notice-copy {font-weight:700;line-height:1.45;}
.template-mini .notice-copy mark {font-size:1.12em;}
.mini-heading {position:absolute;top:11%;left:9%;font-size:7px;font-weight:650;color:var(--surface-ink);z-index:1;}
.mini-brand {position:absolute;bottom:8%;right:9%;font-size:5px;letter-spacing:1px;color:var(--surface-muted);z-index:1;}
.template-mini.theme-cute .notice-content {inset:28% 12% 24%;}
.template-mini.theme-cute .mini-heading {top:13%;left:11%;}
.template-mini .cute-sticker {width:19%;}
.template-mini .notice-decor:before {border-width:1px;}
.template-mini.theme-cute .notice-decor:after {border-width:.6px;}
.template-mini.theme-journal .notice-decor {background-size:auto;background-image:repeating-linear-gradient(0deg,transparent 0 9px,#a69c7d16 9px 10px);}
.template-mini.theme-felt .notice-decor:before {box-shadow:none;}
.template-mini .decor-felt .decor-three {box-shadow:none;}
/* Actual receiver composition mirrors the 16:9 preview. */
.notice-overlay.notice-surface .notice-content {inset:25% 9% 27%;}
.notice-overlay.notice-surface .notice-heading {top:13%;left:9%;font-size:clamp(16px,2vw,30px);gap:.5em;}
.notice-overlay.notice-surface .board-topline {top:4%;left:5%;right:5%;font-size:clamp(10px,.9vw,15px);}
.notice-overlay.notice-surface .board-confirm {position:absolute;bottom:11%;left:50%;transform:translateX(-50%);margin:0;font-size:clamp(12px,1.1vw,17px);background:var(--surface-bg);border-radius:8px;padding:11px 24px;white-space:nowrap;}
.notice-overlay.notice-surface .board-bottomline {position:absolute;bottom:6%;margin:0;left:15%;right:15%;font-size:clamp(10px,.8vw,13px);}
.notice-overlay.theme-cute .notice-content {inset:27% 11% 28%;}
.notice-overlay.theme-cute .notice-heading {left:10%;top:14%;}
.notice-overlay.theme-cute .cute-sticker {width:15%;left:2%;bottom:0;}
.notice-overlay.theme-journal .notice-decor {background-image:repeating-linear-gradient(0deg,transparent 0 49px,#a69c7d16 49px 50px);}
.notice-overlay.theme-felt .notice-decor:before {inset:5%;border-width:2px;}
.notice-overlay.theme-felt .decor-felt .decor-three {width:7%;right:7%;top:6%;}
.notice-overlay.theme-felt .decor-felt .decor-four {width:2.8%;right:9.1%;top:8.5%;}
.notice-overlay.banner.notice-surface {height:260px;min-height:260px;}
.notice-overlay.banner.notice-surface .notice-heading {top:18%;font-size:13px;}
.notice-overlay.banner.notice-surface .notice-content {inset:32% 9% 27%;}
.notice-overlay.banner.notice-surface .board-topline {position:absolute;top:7%;font-size:9px;}
.notice-overlay.banner.notice-surface .board-confirm {bottom:8%;font-size:10px;padding:6px 13px;}
.notice-overlay.banner.notice-surface .board-bottomline {display:none;}
.notice-overlay.banner .cute-sticker {width:15%;}
@media(max-width:520px){
  .notice-heading {font-size:11px;}
  .mini-heading {font-size:6px;}
  .mini-brand {font-size:4px;}
  .notice-meta {font-size:7px;}
  .notice-overlay.notice-surface .notice-heading {font-size:19px;}
  .notice-overlay.notice-surface .notice-content {inset:25% 9% 26%;}
  .notice-overlay.notice-surface .board-confirm {font-size:12px;bottom:13%;}
  .notice-overlay.notice-surface .board-bottomline {font-size:10px;bottom:8%;}
}

/* Presentation color roles are supplied by themes.js on every notice surface. */
.palette-swatches {display:inline-flex;gap:3px;align-items:center;margin-left:auto;}
.palette-swatches i {width:7px;height:7px;border-radius:50%;border:1px solid #0000000d;}
.notice-theme-label {gap:4px;}
.notice-theme-label>small {display:none;}
.notice-theme-button.active .notice-theme-label {font-weight:600;}
.theme-simple .notice-decor:before {border-color:color-mix(in srgb,var(--palette-secondary) 45%,transparent);}
.theme-simple .decor-simple .decor-two {background:var(--palette-secondary);}
.theme-simple .notice-heading {color:var(--surface-ink);}
.theme-simple .heading-rule {height:1.25em;background:var(--accent);}
.theme-simple .notice-decor:after {content:'';position:absolute;top:5%;left:5%;width:12%;height:3px;background:var(--accent);}
.theme-dark .notice-decor {background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--palette-secondary) 18%,transparent),transparent 65%),var(--surface-bg);}
.theme-dark .notice-decor:after {border-color:color-mix(in srgb,var(--accent) 27%,transparent);}
.decor-dark :is(.decor-one,.decor-two) {border-color:color-mix(in srgb,var(--accent) 17%,transparent);}
.theme-dark .decor-dark .decor-three {background:var(--accent);height:2px;}
.theme-dark .notice-heading {color:var(--accent);}
.theme-fresh .notice-decor:after {border-color:color-mix(in srgb,var(--palette-secondary) 70%,transparent);}
.theme-fresh .decor-fresh .decor-one {background:linear-gradient(100deg,var(--palette-secondary),var(--accent-soft));}
.theme-fresh .decor-fresh .decor-two {background:var(--accent-soft);}
.theme-fresh .decor-fresh .decor-three {background:linear-gradient(160deg,var(--accent-soft),var(--palette-secondary));}
.theme-fresh .decor-fresh .decor-four {background:var(--accent-soft);}
.theme-cute .notice-decor {background:none;}
.theme-cute .notice-decor:before {background:var(--surface-bg);border-color:color-mix(in srgb,var(--accent) 35%,white);box-shadow:0 0 0 5px var(--accent-soft),inset 0 0 0 3px #fff;}
.theme-cute .notice-decor:after {border-color:color-mix(in srgb,var(--accent) 40%,white);}
.theme-cute .notice-heading {color:var(--surface-ink);}
.theme-cute .heading-rule,.theme-cute .decor-cute .decor-three {background:var(--accent);}
.theme-cute .decor-cute .decor-four {background:var(--palette-secondary);}
.theme-journal .notice-decor {background-color:var(--surface-bg);}
.theme-journal .notice-decor:before {border-color:color-mix(in srgb,var(--palette-secondary) 60%,transparent);}
.theme-journal .decor-journal .decor-one {background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--palette-secondary) 60%,transparent) 0 3px,color-mix(in srgb,var(--palette-secondary) 35%,transparent) 3px 6px);}
.theme-journal .notice-heading {color:var(--accent);border-color:var(--palette-secondary);}
.theme-felt .notice-decor:before {border-color:color-mix(in srgb,var(--accent) 65%,var(--surface-bg));box-shadow:0 0 0 4px #ffffff36,0 0 0 5px #c4b19422;}
.theme-felt .decor-felt .decor-one {background:linear-gradient(120deg,var(--accent-soft),var(--accent));border-color:color-mix(in srgb,var(--accent) 50%,transparent);}
.theme-felt .decor-felt .decor-two {background:linear-gradient(110deg,color-mix(in srgb,var(--palette-secondary) 65%,white),var(--palette-secondary));border-color:var(--palette-secondary);}
.theme-felt .decor-felt .decor-three {background:linear-gradient(120deg,var(--palette-secondary),color-mix(in srgb,var(--palette-secondary) 80%,var(--ink)));border-color:#fff8;box-shadow:0 0 0 2px var(--palette-secondary),2px 3px 4px #68533925;}
.theme-felt .decor-felt .decor-four {background:var(--accent-soft);border-color:var(--palette-secondary);}
.theme-felt .heading-rule {background:var(--accent);}
@media(max-width:430px){.palette-swatches{gap:2px}.palette-swatches i{width:6px;height:6px}}