.colour-room{width:min(1416px,92%);margin:0 auto;padding:clamp(42px,6.4vw,100px) 0 clamp(55px,8vw,120px);color:var(--ink,#252720);font-family:var(--sans,Arial,sans-serif)}
.colour-room *{box-sizing:border-box}
.cr-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin:0 0 34px}
.cr-heading h1,.cr-inspector h2{font-family:var(--serif,Georgia,serif);font-weight:400;letter-spacing:-.065em}
.cr-heading h1{font-size:clamp(52px,6.9vw,105px);line-height:1;margin:0 0 .19em}
.cr-heading h1 em{font-weight:400}
.cr-heading p{max-width:560px;font-size:clamp(15px,1.1vw,18px);line-height:1.6;margin:0}
.cr-collection{display:grid;gap:7px;min-width:min(220px,100%);text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:650}
.cr-collection select{width:100%;padding:10px 24px 10px 0;border:0;border-bottom:1px solid var(--ink,#252720);background:transparent;color:inherit;cursor:pointer;font:400 20px var(--serif,Georgia,serif);border-radius:0}
.cr-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(274px,.39fr);border:1px solid var(--line,rgb(203,203,203))}
.cr-preview-panel{min-width:0;display:flex;flex-direction:column;background:#e6e4da}
.cr-toolbar{display:flex;align-items:stretch;border-bottom:1px solid var(--line,rgb(203,203,203));padding:0 18px;background:var(--paper,#faf8f0);gap:20px}
.cr-toolbar button,.cr-reset{width:auto;min-height:46px;cursor:pointer;font:500 13px var(--sans,Arial,sans-serif);color:var(--ink,#252720);margin:0;background:transparent;border:0;border-radius:0;padding:4px 1px}
.cr-toolbar button{position:relative;color:#696b60}
.cr-toolbar button[aria-pressed=true]{color:var(--ink,#252720)}
.cr-toolbar button[aria-pressed=true]::after{content:"";position:absolute;height:2px;inset:auto 0 0;background:currentColor}
.cr-stage{--cr-paper:#F6E6C9;--cr-ink:#382629;--cr-accent:#B83934;display:grid;place-items:center;min-height:380px;flex:1;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(114deg,#d5d2c3 0%,#ecebe1 36%,#e5e2d4 67%,#bcbcae 100%);container-type:inline-size}
.cr-stage::before{content:"";position:absolute;inset:-40%;z-index:-1;background:linear-gradient(135deg,transparent 0 41%,#b6b4a940 41.4% 46%,transparent 46.7% 70%,#aaa99c54 71% 77%,transparent 78%);transform:rotate(7deg);filter:blur(6px)}
.cr-prop{width:100%;min-height:380px;position:relative;display:grid;place-items:center;margin:0;padding:30px}
.cr-prop[hidden]{display:none!important}
.cr-print{padding:42px 0}
.cr-backing,.cr-invite{width:clamp(188px,36cqw,275px);aspect-ratio:3.9/5;box-shadow:4px 7px 14px #4843342e}
.cr-backing{position:absolute;transform:translate(-9%,0) rotate(-10deg);background:var(--cr-accent)}
.cr-invite{margin:0;position:relative;padding:6%;padding:clamp(9px,1.1cqw,13px);transform:translate(7%,-1%) rotate(5deg);background:var(--cr-paper);color:var(--cr-ink);font-family:Georgia,serif}
.cr-invite-frame{height:100%;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid var(--cr-accent);padding:9px}
.cr-prop p{margin:0}
.cr-imprint,.cr-subtype{font:600 clamp(7px,1.05cqw,11px)/1.4 Arial,sans-serif;text-transform:uppercase;letter-spacing:.14em}
.cr-cameo{width:clamp(24px,4cqw,40px);aspect-ratio:1;border-radius:50%;position:relative;overflow:hidden;margin:8% 0 4%;background:var(--cr-accent)}
.cr-cameo i{display:block;position:absolute;width:115%;aspect-ratio:1;border-radius:50%;left:27%;top:-17%;background:var(--cr-paper)}
.cr-prop .cr-invite-title{font:400 clamp(38px,7.3cqw,75px)/.83 Georgia,serif;letter-spacing:-.085em;text-align:center;color:var(--cr-ink)}
.cr-invite-title em,.cr-screen-title em{font-weight:400}
.cr-rule{display:block;background:var(--cr-accent);width:18%;height:2px;margin:7% 0}
.cr-prop .cr-subtype{font-size:clamp(6px,.77cqw,9px)}
.cr-packet{position:relative;width:clamp(170px,31cqw,250px);aspect-ratio:.67;transform:rotate(-4deg);background:linear-gradient(94deg,#0002,transparent 12% 85%,#0003),var(--cr-accent);clip-path:polygon(1% 0,99% 0,97% 8%,100% 97%,93% 100%,6% 100%,0 97%,3% 9%);display:grid;place-items:center;box-shadow:inset -5px 0 8px #0002}
.cr-packet-seal{position:absolute;inset:1% 1% auto;height:6.5%;background:repeating-linear-gradient(0deg,#ffffff3b 0 1px,#0002 1px 2px,transparent 2px 3px)}
.cr-packet-label{display:flex;flex-direction:column;align-items:center;justify-content:center;width:78%;height:65%;background:var(--cr-paper);color:var(--cr-ink);border-block:4px double var(--cr-ink)}
.cr-pack-symbol{width:16%;aspect-ratio:.68;border:2px solid var(--cr-accent);border-radius:0 80% 0 80%;margin:12% 0 6%;transform:rotate(25deg)}
.cr-prop .cr-pack-title{font:400 clamp(39px,7.7cqw,75px)/1 Georgia,serif;letter-spacing:-.065em;margin:0 0 8%}
.cr-screen-frame{width:min(94%,710px);padding:5px;background:#252720;border-radius:11px;box-shadow:8px 20px 24px #3e393334;transform:rotate(-2deg)}
.cr-browser-bar{display:flex;align-items:center;gap:4px;padding:6px 5px 9px}
.cr-browser-bar i{display:block;border-radius:100%;width:4px;height:4px;background:#c3c1b3}
.cr-screen-page{background:var(--cr-paper);color:var(--cr-ink);border-radius:0 0 5px 5px;padding:4% 5% 6%}
.cr-screen-nav{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid currentColor;padding-bottom:3%}
.cr-screen-nav b{font:400 clamp(16px,2.6cqw,28px)/1 Georgia,serif;letter-spacing:-.08em}
.cr-screen-nav span{font:550 clamp(7px,1cqw,12px) Arial,sans-serif}
.cr-spread{display:grid;grid-template-columns:1fr 1fr;gap:3%;align-items:center;margin-top:4%}
.cr-prop .cr-screen-title{font:400 clamp(33px,6.4cqw,70px)/.88 Georgia,serif;letter-spacing:-.08em;margin:10% 0 0}
.cr-arch-art{aspect-ratio:1.02;position:relative;isolation:isolate;overflow:hidden;background:var(--cr-accent)}
.cr-arch-art i,.cr-arch-art b{position:absolute;width:60%;height:83%;border-radius:70% 70% 0 0;inset:auto auto 0 0;background:var(--cr-ink)}
.cr-arch-art b{width:56%;height:63%;left:43%;background:var(--cr-paper);opacity:.85}
.cr-inspector{border-left:1px solid var(--line,rgb(203,203,203));background:var(--paper,#faf8f0);padding:clamp(17px,2.5vw,35px);min-width:0}
.cr-inspector-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.cr-inspector h2{font-size:clamp(26px,2.7vw,42px);line-height:1.04;margin:0}
.cr-reset{min-height:36px;text-decoration:underline;text-underline-offset:4px;font-size:12px}
.cr-role{border:0;padding:0;margin:16px 0 0;min-width:0}
.cr-role legend{font:500 13px/1.4 var(--sans,Arial,sans-serif);padding:0;margin:0 0 5px}
.cr-role legend span{color:#606256}
.cr-options{display:flex;gap:4px;align-items:center}
.cr-chip{position:relative;display:grid;place-items:center;width:clamp(35px,3.3vw,49px);height:39px;cursor:pointer}
.cr-chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cr-chip i{display:block;width:81%;height:71%;background:var(--chip);border:1px solid #29271b20;pointer-events:none}
.cr-chip input:checked+i{outline:1.5px solid var(--ink,#252720);outline-offset:3px}
.cr-chip input:focus-visible+i,.colour-room button:focus-visible,.colour-room select:focus-visible{outline:2px solid #226690;outline-offset:3px}
.cr-contrast{margin:20px 0 14px;border-top:1px solid var(--line,rgb(203,203,203));padding-top:13px;font:500 12px/1.5 var(--sans,Arial,sans-serif);color:#4c5144;min-height:2.6em}
.cr-save{font:600 13px var(--sans,Arial,sans-serif);display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:45px;width:100%;background:var(--ink,#252720);color:var(--paper,#faf8f0);border:0;border-radius:0;padding:12px 16px;cursor:pointer}
.cr-save:hover{background:#3e4637}.cr-save span{font-size:17px}
@media(max-width:760px){.cr-heading{display:grid;gap:21px;margin-bottom:22px}.cr-collection{min-width:0;max-width:300px}.cr-workspace{grid-template-columns:1fr}.cr-inspector{border-left:0;border-top:1px solid var(--line,rgb(203,203,203))}.cr-stage,.cr-prop{min-height:300px}.cr-stage{aspect-ratio:1.4}.cr-prop{padding:22px 15px}.cr-toolbar{gap:17px;padding-inline:12px}.cr-options{gap:9px}.cr-chip{width:42px;height:40px}.cr-inspector{padding:20px}.cr-role{margin-top:14px}.cr-inspector h2{font-size:30px}.cr-heading h1{font-size:clamp(51px,9vw,70px)}}
@media(max-width:400px){.cr-stage,.cr-prop{min-height:260px}.cr-invite,.cr-backing{width:165px}.cr-packet{width:135px}}
.colour-room:not([data-room-mode="sample"]) [data-room-sample],
.colour-room[data-room-mode="sample"] [data-room-member],
html[data-membership="signed-in"] .cr-signin {display:none}
.cr-sample-label {
  flex-shrink:0;display:grid;gap:5px;padding-left:16px;border-left:3px solid #B83934;
}
.cr-sample-label span,.cr-postcard-imprint,.cr-postcard-date {
  text-transform:uppercase;letter-spacing:.12em;font:650 10px/1.25 var(--sans,Arial,sans-serif);
}
.cr-sample-label span{color:#8e322d;letter-spacing:.11em}
.cr-sample-label strong{font:400 clamp(24px,2.6vw,38px)/1.12 var(--serif,Georgia,serif);letter-spacing:-.055em}
.colour-room[data-room-mode="sample"] .cr-stage {
  background:linear-gradient(122deg,#c5b2a8,#e6d8c9 39%,#ded1c0 69%,#bcae9f);
}
.colour-room[data-room-mode="sample"] .cr-backing,
.colour-room[data-room-mode="sample"] .cr-invite {
  width:clamp(180px,51cqw,465px);aspect-ratio:1.52;
}
.colour-room[data-room-mode="sample"] .cr-backing {
  transform:translate(-2%,3%) rotate(-7deg);box-shadow:3px 9px 15px #49332838;
}
.colour-room[data-room-mode="sample"] .cr-invite {
  padding:0;transform:translate(2%,-2%) rotate(4deg);box-shadow:4px 9px 20px #49332833;
}
.cr-postcard {
  position:absolute;inset:6%;border:1px solid var(--cr-accent);display:flex;flex-direction:column;
  justify-content:space-between;align-items:flex-start;padding:4.5% 5%;overflow:hidden;
}
.cr-postcard-imprint,.cr-postcard-date{font-size:clamp(6px,1.05cqw,11px);letter-spacing:.15em}
.cr-postcard-title{font:400 clamp(31px,6.8cqw,66px)/.79 Georgia,serif;letter-spacing:-.075em}
.cr-postcard-title em{font-weight:400}
.cr-postage {
  position:absolute;right:5%;top:7%;width:13%;aspect-ratio:.84;background:var(--cr-accent);
  border:2px dotted var(--cr-paper);color:var(--cr-paper);isolation:isolate;text-align:right;
}
.cr-postage i {position:absolute;inset:19% 20% 26%;border:1px solid currentColor;border-radius:50% 50% 0 0;}
.cr-postage i::after {content:"";position:absolute;left:25%;bottom:0;width:50%;height:38%;border-radius:50% 50% 0 0;background:currentColor}
.cr-postage span{position:absolute;right:7%;bottom:4%;font:600 clamp(4px,.78cqw,8px)/1 Arial,sans-serif}
.cr-postmark {
  position:absolute;top:31%;right:8%;width:20%;height:7%;transform:rotate(-11deg);
  border-block:1px solid var(--cr-accent);
}
.cr-postmark::after{content:"";position:absolute;inset:50% 0 auto;border-top:1px solid var(--cr-accent)}
.cr-upgrade {display:grid;justify-items:start;gap:9px}
.cr-upgrade p{font-size:12px;line-height:1.5;margin:0;color:#59574f}
.cr-join {display:inline-flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;width:100%;
  min-height:45px;text-decoration:none;background:#97362f;color:#fff9ed;font:600 13px var(--sans,Arial,sans-serif)}
.cr-join:hover,.cr-join:focus-visible{background:#772721;color:#fff9ed}
.cr-signin {display:inline-flex;align-items:center;min-height:26px;font-size:12px;text-underline-offset:3px;color:var(--ink,#252720)}
@media(max-width:760px){
  .colour-room[data-room-mode="sample"] .cr-heading {gap:15px;margin-bottom:18px}
  .cr-sample-label{grid-template-columns:auto auto;align-items:baseline;justify-content:start;gap:10px;padding-left:9px}
  .cr-sample-label strong{font-size:22px}
  .colour-room[data-room-mode="sample"] .cr-workspace{display:block}
  .colour-room[data-room-mode="sample"] .cr-preview-panel{position:sticky;top:0;z-index:2}
  .colour-room[data-room-mode="sample"] .cr-stage{min-height:0;aspect-ratio:auto;height:clamp(155px,28svh,235px);flex:none}
  .colour-room[data-room-mode="sample"] .cr-prop{min-height:0;height:100%;padding:9px}
  .colour-room[data-room-mode="sample"] .cr-invite,
  .colour-room[data-room-mode="sample"] .cr-backing{width:min(63cqw,34svh,270px)}
  .colour-room[data-room-mode="sample"] .cr-packet{width:min(32cqw,16svh,140px)}
  .colour-room[data-room-mode="sample"] .cr-screen-frame{width:min(80cqw,42svh,350px)}
  .colour-room[data-room-mode="sample"] .cr-toolbar button{min-height:41px}
  .colour-room[data-room-mode="sample"] .cr-inspector{padding:16px}
  .colour-room[data-room-mode="sample"] .cr-role{scroll-margin-top:calc(235px + 52px)}
}
@media(max-width:400px){
  .cr-options{gap:5px}.cr-chip{width:min(42px,16%);height:40px}
  .colour-room[data-room-mode="sample"] .cr-heading h1{font-size:clamp(44px,14vw,54px)}
}
@media(max-height:400px){.colour-room[data-room-mode="sample"] .cr-preview-panel{position:relative}}

.cr-noscript{padding:10px 14px;border-left:3px solid #B83934;color:var(--ink,#252720);font-size:14px}