:root {
  color-scheme: light;
  --canvas-ease: cubic-bezier(.2,.72,.2,1);
}

*,*::before,*::after { box-sizing: border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; }
body { font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased; }
body,button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { color:inherit; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
[hidden] { display:none !important; }

.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.skip-link { position:fixed; z-index:999; top:10px; left:10px; transform:translateY(-150%); padding:10px 16px; color:#07111d; background:#fff; border-radius:999px; box-shadow:0 12px 40px rgba(0,0,0,.25); }
.skip-link:focus { transform:translateY(0); }
.viewport-shell,.viewport-layout { width:100%; height:100dvh; min-width:0; min-height:0; overflow:hidden; }
.viewport-layout { isolation:isolate; }
.viewport-layout * { min-width:0; }
.viewport-layout button,.viewport-layout a { outline:0; }
.viewport-layout button:focus-visible,.viewport-layout a:focus-visible { outline:3px solid currentColor; outline-offset:3px; }

.solution-card--blue { --solution-card-accent:#3976f6; }
.solution-card--brown { --solution-card-accent:#a36c45; }
.solution-card--green { --solution-card-accent:#259a69; }
.solution-card--purple { --solution-card-accent:#8a5ce6; }
.solution-card--orange { --solution-card-accent:#ee7d2f; }
.solution-card--cyan { --solution-card-accent:#11a9bd; }
.solution-media { position:relative; isolation:isolate; display:grid; place-items:center; flex:0 0 auto; overflow:hidden; color:var(--solution-card-accent,currentColor); background:color-mix(in srgb,var(--solution-card-accent,currentColor) 9%,transparent); }
.solution-media__fallback { position:relative; z-index:0; font-family:Georgia,"Noto Serif Thai",serif; font-size:clamp(13px,2vw,24px); font-weight:800; line-height:1; letter-spacing:-.04em; }
.solution-media__image { position:absolute; z-index:1; inset:0; width:100%; height:100%; max-width:none; padding:8%; object-fit:contain; background:color-mix(in srgb,#fff 94%,var(--solution-card-accent,currentColor)); }
.solution-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; min-height:0; grid-column:1/-1; grid-row:1/-1; padding:18px; text-align:center; color:inherit; border:1px dashed color-mix(in srgb,currentColor 28%,transparent); }
.solution-empty strong { font-size:clamp(14px,1.4vw,20px); font-weight:600; }
.solution-empty span { margin-top:5px; opacity:.68; font-size:9px; }
.luxury-collection:focus-visible,.atelier-collection:focus-visible,.play-products:focus-visible,.quiet-list:focus-visible,.pulse-selector:focus-visible,.bureau-files:focus-visible { outline:2px solid currentColor; outline-offset:-3px; }

/* Shared promotion dialog — the page never scrolls; long promotion content does. */
.promotion-dialog,.promo-dialog { width:min(880px,calc(100vw - 32px)); max-height:min(82dvh,760px); margin:auto; padding:0; overflow:hidden; color:#101726; background:#f8fafc; border:0; border-radius:22px; box-shadow:0 30px 100px rgba(0,0,0,.45); }
.promotion-dialog::backdrop,.promo-dialog::backdrop { background:rgba(4,8,16,.74); backdrop-filter:blur(9px); }
.promotion-dialog__head,.promo-dialog__head,.promo-dialog__header { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:68px; padding:14px 18px 14px 22px; color:#fff; background:var(--tone-bg-dark,#0b1730); }
.promotion-dialog__head p,.promo-dialog__head p,.promo-dialog__header p { margin:0; font-size:12px; font-weight:700; letter-spacing:.16em; }
.promotion-dialog__head h2,.promo-dialog__head h2,.promo-dialog__header h2 { margin:2px 0 0; font-size:clamp(20px,3vw,30px); line-height:1.15; }
.promotion-dialog__head button,.promo-dialog__head button,.promo-dialog__header button { width:44px; height:44px; flex:0 0 auto; cursor:pointer; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); border-radius:50%; }
.promo-dialog__surface { display:grid; grid-template-rows:auto minmax(0,1fr) auto; max-height:min(82dvh,760px); }
.promotion-dialog__body,.promo-dialog__scroll { min-height:0; overflow:auto; padding:16px; }
.promotion-card,.promo-dialog__item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; padding:18px; color:#101726; background:#fff; border:1px solid #dbe2ec; border-radius:16px; }
.promotion-card+.promotion-card,.promo-dialog__item+.promo-dialog__item { margin-top:12px; }
.promotion-card h3,.promo-dialog__item h3 { margin:0 0 5px; font-size:20px; line-height:1.25; }
.promotion-card p,.promo-dialog__item p { margin:0; color:#566174; }
.promotion-card a,.promo-dialog__item a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 15px; font-weight:700; white-space:nowrap; color:var(--tone-accent-ink,#fff); background:var(--tone-accent-surface,var(--tone-accent,#0b1730)); border-radius:999px; }
.promotion-card img,.promo-dialog__item img { width:100%; max-height:220px; object-fit:cover; grid-column:1/-1; border-radius:12px; }
.promo-dialog__media { min-height:120px; overflow:hidden; border-radius:12px; }
.promo-dialog__media img { width:100%; height:100%; max-height:240px; object-fit:cover; border-radius:inherit; }
.promo-dialog__content { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-width:0; }
.promo-dialog__content:first-child:last-child { grid-column:1/-1; }
.promo-dialog__content>span { margin-bottom:6px; color:var(--tone-accent-on-light,var(--tone-accent,#4263eb)); font-size:9px; font-weight:800; letter-spacing:.16em; }
.promo-dialog__content a { margin-top:14px; }
.promo-dialog__footer { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:54px; padding:8px 16px; color:#334155; background:#fff; border-top:1px solid #dbe2ec; font-size:12px; }
.promo-dialog__footer a { color:#334155; text-decoration:underline; text-underline-offset:3px; }
.promo-dialog__footer button { min-height:38px; padding:7px 13px; cursor:pointer; color:var(--tone-accent-ink,#fff); background:var(--tone-accent-surface,var(--tone-accent,#0b1730)); border:0; border-radius:999px; }

/* -------------------------------------------------------------------------- */
/* 07 — Premium Atelier                                                       */
/* -------------------------------------------------------------------------- */

.viewport-layout.layout-07 {
  --atelier-bg:var(--tone-bg-dark,#16130f);
  --atelier-ink:var(--tone-text-on-dark,#f8f0dc);
  --atelier-muted:var(--tone-text-muted-dark,#b8ad96);
  --atelier-gold:var(--tone-accent-on-dark,var(--tone-accent,#d8b66c));
  --atelier-surface:var(--tone-accent-surface,var(--tone-accent,#d8b66c));
  --atelier-gold-ink:var(--tone-accent-ink,#16130f);
  display:grid; grid-template-columns:clamp(58px,6.5vw,96px) minmax(0,1fr); color:var(--atelier-ink); background:var(--atelier-bg);
}
.atelier-rail { display:flex; flex-direction:column; align-items:center; gap:18px; min-height:0; padding:clamp(14px,2dvh,24px) 8px; border-right:1px solid color-mix(in srgb,var(--atelier-gold) 28%,transparent); }
.atelier-seal { display:grid; place-items:center; width:clamp(42px,4vw,58px); aspect-ratio:1; color:var(--atelier-gold); border:1px solid var(--atelier-gold); border-radius:50%; }
.atelier-seal span { font-family:Georgia,serif; font-size:clamp(16px,1.5vw,23px); line-height:1; }
.atelier-seal b { font-size:6px; font-weight:500; letter-spacing:.08em; }
.atelier-rail>p { margin:auto 0; color:var(--atelier-muted); font-size:8px; font-weight:700; letter-spacing:.2em; writing-mode:vertical-rl; transform:rotate(180deg); }
.atelier-rail__line { width:1px; min-height:22px; flex:1 1 52px; background:linear-gradient(transparent,var(--atelier-gold),transparent); }
.atelier-rail>span { color:var(--atelier-muted); font-size:7px; letter-spacing:.12em; writing-mode:vertical-rl; }
.atelier-main { min-height:0; display:grid; grid-template-rows:clamp(54px,7dvh,68px) minmax(0,1fr) clamp(26px,3.6dvh,36px); }
.atelier-masthead,.atelier-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-inline:clamp(18px,3vw,48px); border-color:color-mix(in srgb,var(--atelier-gold) 20%,transparent); }
.atelier-masthead { border-bottom:1px solid color-mix(in srgb,var(--atelier-gold) 20%,transparent); }
.atelier-masthead>p,.atelier-footer { color:var(--atelier-muted); font-size:8px; letter-spacing:.2em; }
.atelier-masthead nav { display:flex; gap:clamp(16px,3vw,44px); max-width:42%; margin-left:auto; overflow:auto hidden; overscroll-behavior-inline:contain; scrollbar-width:thin; color:var(--atelier-muted); font-size:8px; letter-spacing:.15em; white-space:nowrap; }
.atelier-masthead nav a:hover { color:var(--atelier-gold); }
.atelier-promo { display:grid; grid-template-columns:auto minmax(0,170px) 22px; gap:8px; align-items:center; min-height:36px; padding:5px 7px 5px 11px; cursor:pointer; color:var(--atelier-ink); background:transparent; border:1px solid color-mix(in srgb,var(--atelier-gold) 45%,transparent); }
.atelier-promo span { color:var(--atelier-gold); font-size:7px; letter-spacing:.14em; }
.atelier-promo strong { overflow:hidden; font-size:9px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.atelier-promo b { display:grid; place-items:center; width:22px; height:22px; color:var(--atelier-gold-ink); background:var(--atelier-surface); border-radius:50%; font-size:9px; }
.atelier-canvas { position:relative; min-height:0; display:grid; grid-template-columns:minmax(250px,31%) minmax(0,1fr); overflow:hidden; }
.atelier-canvas::before { content:""; position:absolute; top:12%; left:22%; width:35vmin; aspect-ratio:1; pointer-events:none; border:1px solid color-mix(in srgb,var(--atelier-gold) 12%,transparent); border-radius:50%; box-shadow:0 0 0 9vmin color-mix(in srgb,var(--atelier-gold) 2%,transparent),0 0 0 18vmin color-mix(in srgb,var(--atelier-gold) 2%,transparent); }
.atelier-intro { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; padding:clamp(24px,4vw,68px); border-right:1px solid color-mix(in srgb,var(--atelier-gold) 20%,transparent); }
.atelier-intro>p { display:flex; align-items:center; gap:9px; margin:0 0 clamp(14px,3dvh,28px); color:var(--atelier-gold); font-size:8px; font-weight:700; letter-spacing:.2em; }
.atelier-intro>p i { width:24px; height:1px; background:currentColor; }
.atelier-intro h1 { margin:0; font-family:"Noto Serif Thai",serif; font-size:clamp(32px,3.8vw,60px); font-weight:500; line-height:1.25; letter-spacing:0; }
.atelier-intro h1 em { color:var(--atelier-gold); font-style:normal; }
.atelier-intro>span { max-width:32ch; margin-top:auto; color:var(--atelier-muted); font-size:10px; }
.atelier-collection { position:relative; z-index:1; min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; align-content:stretch; padding:clamp(18px,3vw,48px); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--atelier-gold) 55%,transparent) transparent; }
.atelier-piece { min-height:0; border:1px solid color-mix(in srgb,var(--atelier-gold) 25%,transparent); transition:transform .35s var(--canvas-ease),border-color .25s,background .25s; }
.atelier-piece:nth-child(2) { transform:translateY(clamp(10px,2dvh,22px)); }
.atelier-piece:nth-child(3) { transform:translateY(clamp(-10px,-1.5dvh,-18px)); }
.atelier-piece:hover,.atelier-piece.is-active { position:relative; z-index:2; background:color-mix(in srgb,var(--atelier-gold) 9%,transparent); border-color:var(--atelier-gold); transform:translateY(-6px); }
.atelier-piece>a { position:relative; display:flex; flex-direction:column; height:100%; min-height:0; padding:clamp(12px,1.8vw,26px); overflow:hidden; }
.atelier-piece__number { align-self:flex-end; color:var(--atelier-muted); font-family:Georgia,serif; font-size:10px; letter-spacing:.12em; }
.atelier-piece__crest { position:relative; display:grid; place-items:center; width:min(11vw,116px); aspect-ratio:1; margin:auto; color:var(--atelier-gold); border:1px solid color-mix(in srgb,var(--atelier-gold) 45%,transparent); border-radius:50%; }
.atelier-piece__crest::before,.atelier-piece__crest::after { content:""; position:absolute; left:50%; top:50%; width:min(8vw,84px); aspect-ratio:1; border:1px solid color-mix(in srgb,var(--atelier-gold) 18%,transparent); transform:translate(-50%,-50%) rotate(45deg); }
.atelier-piece__crest::after { transform:translate(-50%,-50%) rotate(90deg); }
.atelier-piece__crest span { font-family:Georgia,serif; font-size:clamp(28px,4vw,58px); }
.atelier-piece .solution-media { width:min(9vw,92px); aspect-ratio:1; margin:auto; border:1px solid color-mix(in srgb,var(--solution-card-accent,var(--atelier-gold)) 55%,var(--atelier-gold)); border-radius:50%; box-shadow:inset 0 0 0 8px color-mix(in srgb,var(--atelier-gold) 5%,transparent); }
.atelier-piece__identity { display:flex; flex-direction:column; padding-top:14px; border-top:1px solid color-mix(in srgb,var(--atelier-gold) 26%,transparent); }
.atelier-piece__identity small { color:var(--atelier-gold); font-size:7px; letter-spacing:.18em; }
.atelier-piece__identity strong { margin-top:5px; font-family:Georgia,"Noto Serif Thai",serif; font-size:clamp(19px,1.7vw,28px); font-weight:500; }
.atelier-piece__identity span { color:var(--atelier-muted); font-size:9px; }
.atelier-piece__reveal h2 { display:-webkit-box; margin:10px 0 0; overflow:hidden; font-size:clamp(11px,.92vw,14px); font-weight:500; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.atelier-piece__reveal>div { display:flex; flex-wrap:wrap; gap:4px; margin-top:9px; }
.atelier-piece__reveal>div span { color:var(--atelier-muted); font-size:7px; letter-spacing:.08em; }
.atelier-piece__reveal>div span+span::before { content:"·"; margin-right:4px; color:var(--atelier-gold); }
.atelier-piece__reveal>b { display:flex; justify-content:space-between; margin-top:10px; color:var(--atelier-gold); font-size:8px; letter-spacing:.15em; }
.atelier-piece__reveal i { font-size:14px; font-style:normal; }
.atelier-footer p { margin:0; }
.atelier-footer a { color:var(--atelier-gold); }

.viewport-layout.layout-07.solution-count-0 .atelier-collection,
.viewport-layout.layout-07.solution-count-1 .atelier-collection { grid-template-columns:minmax(0,1fr); }
.viewport-layout.layout-07.solution-count-2 .atelier-collection { grid-template-columns:repeat(2,minmax(0,1fr)); }
.viewport-layout.layout-07.solution-count-4 .atelier-collection { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:8px; }
.viewport-layout.layout-07:is(.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .atelier-collection { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:minmax(230px,1fr); align-content:start; gap:7px; }
.viewport-layout.layout-07:is(.solution-count-4,.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .atelier-piece,
.viewport-layout.layout-07:is(.solution-count-4,.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .atelier-piece:hover,
.viewport-layout.layout-07:is(.solution-count-4,.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .atelier-piece.is-active { transform:none; }

/* -------------------------------------------------------------------------- */
/* 08 — Future Pulse                                                          */
/* -------------------------------------------------------------------------- */

.viewport-layout.layout-08 {
  --pulse-bg:var(--tone-bg-dark,#03070e);
  --pulse-ink:var(--tone-text-on-dark,#edf9ff);
  --pulse-muted:var(--tone-text-muted-dark,#7894a8);
  --pulse-accent:var(--tone-accent-on-dark,var(--tone-accent,#4dfcff));
  --pulse-surface:var(--tone-accent-surface,var(--tone-accent,#4dfcff));
  --pulse-accent-ink:var(--tone-accent-ink,#021017);
  display:grid; grid-template-rows:clamp(54px,7dvh,68px) minmax(0,1fr) clamp(27px,3.8dvh,38px); color:var(--pulse-ink); background:var(--pulse-bg);
}
.viewport-layout.layout-08::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background-image:linear-gradient(color-mix(in srgb,var(--pulse-accent) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--pulse-accent) 5%,transparent) 1px,transparent 1px); background-size:36px 36px; }
.pulse-masthead,.pulse-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-inline:clamp(16px,3vw,46px); border-color:color-mix(in srgb,var(--pulse-accent) 18%,transparent); }
.pulse-masthead { border-bottom:1px solid color-mix(in srgb,var(--pulse-accent) 18%,transparent); }
.pulse-footer { border-top:1px solid color-mix(in srgb,var(--pulse-accent) 18%,transparent); color:var(--pulse-muted); font-size:8px; letter-spacing:.15em; }
.pulse-brand { display:flex; align-items:center; gap:10px; }
.pulse-brand__glyph { position:relative; display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--pulse-accent); border-radius:8px; transform:rotate(45deg); box-shadow:0 0 18px color-mix(in srgb,var(--pulse-accent) 22%,transparent); }
.pulse-brand__glyph i { position:absolute; width:12px; height:1px; background:var(--pulse-accent); }
.pulse-brand__glyph i:nth-child(2) { transform:rotate(60deg); }.pulse-brand__glyph i:nth-child(3) { transform:rotate(-60deg); }
.pulse-brand strong { display:flex; flex-direction:column; color:var(--pulse-accent); font-size:16px; line-height:1; letter-spacing:.05em; }
.pulse-brand strong span { margin-top:3px; color:var(--pulse-muted); font-size:6px; letter-spacing:.2em; }
.pulse-system { display:flex; align-items:center; gap:8px; margin-left:auto; color:var(--pulse-muted); font-size:8px; letter-spacing:.14em; }
.pulse-system i { width:7px; height:7px; background:var(--pulse-accent); border-radius:50%; box-shadow:0 0 10px var(--pulse-accent); animation:pulseBlink 1.8s infinite; }
.pulse-system b { color:var(--pulse-accent); }
.pulse-promo { display:grid; grid-template-columns:auto minmax(0,160px) 26px; align-items:center; gap:8px; min-height:38px; padding:5px 6px 5px 11px; cursor:pointer; color:var(--pulse-ink); background:color-mix(in srgb,var(--pulse-accent) 5%,transparent); border:1px solid color-mix(in srgb,var(--pulse-accent) 28%,transparent); clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.pulse-promo span { color:var(--pulse-accent); font-size:7px; letter-spacing:.12em; }
.pulse-promo strong { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.pulse-promo i { display:grid; place-items:center; width:26px; height:26px; color:var(--pulse-accent-ink); background:var(--pulse-surface); font-style:normal; }
.pulse-console { position:relative; min-height:0; display:grid; grid-template-columns:minmax(210px,26%) minmax(330px,43%) minmax(260px,31%); grid-template-rows:minmax(0,1fr) auto; overflow:hidden; }
.pulse-intro { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; grid-row:1/-1; padding:clamp(24px,3.5vw,56px); border-right:1px solid color-mix(in srgb,var(--pulse-accent) 14%,transparent); }
.pulse-intro>span { margin-bottom:clamp(14px,3dvh,30px); color:var(--pulse-accent); font-size:8px; font-weight:700; letter-spacing:.2em; }
.pulse-intro h1 { margin:0; font-size:clamp(32px,4vw,63px); font-weight:600; line-height:1.25; letter-spacing:0; }
.pulse-intro h1 em { color:var(--pulse-accent); font-style:normal; text-shadow:0 0 30px color-mix(in srgb,var(--pulse-accent) 35%,transparent); }
.pulse-intro p { margin-top:auto; color:var(--pulse-muted); font-size:10px; }
.pulse-visual { position:relative; display:grid; place-items:center; min-height:0; overflow:hidden; }
.pulse-visual::before { content:""; position:absolute; width:min(35vw,58dvh); aspect-ratio:1; border:1px solid color-mix(in srgb,var(--pulse-accent) 15%,transparent); border-radius:50%; box-shadow:0 0 0 8vmin color-mix(in srgb,var(--pulse-accent) 2%,transparent),0 0 0 16vmin color-mix(in srgb,var(--pulse-accent) 2%,transparent); }
.pulse-orb { position:relative; display:grid; place-items:center; width:min(18vw,31dvh); aspect-ratio:1; color:var(--pulse-accent); background:radial-gradient(circle,color-mix(in srgb,var(--pulse-accent) 22%,transparent),transparent 67%); border:1px solid var(--pulse-accent); border-radius:50%; box-shadow:inset 0 0 45px color-mix(in srgb,var(--pulse-accent) 16%,transparent),0 0 50px color-mix(in srgb,var(--pulse-accent) 16%,transparent); }
.pulse-orb span { font-size:clamp(36px,5vw,76px); font-weight:700; letter-spacing:-.08em; }
.pulse-orb i { position:absolute; width:130%; height:42%; border:1px solid color-mix(in srgb,var(--pulse-accent) 34%,transparent); border-radius:50%; transform:rotate(18deg); }
.pulse-orb i:nth-of-type(2) { transform:rotate(78deg); }.pulse-orb i:nth-of-type(3) { transform:rotate(138deg); }
.pulse-coordinates { position:absolute; right:10px; bottom:10px; display:flex; flex-direction:column; color:var(--pulse-muted); font-size:7px; letter-spacing:.15em; }
.pulse-selector { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-column:2; gap:8px; padding:0 clamp(12px,2vw,30px) clamp(12px,2dvh,22px); }
.pulse-node { position:relative; min-height:66px; padding:9px 10px; cursor:pointer; text-align:left; color:var(--pulse-muted); background:color-mix(in srgb,var(--pulse-bg) 85%,transparent); border:1px solid color-mix(in srgb,var(--pulse-accent) 17%,transparent); clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); transition:color .2s,background .2s,border-color .2s,transform .25s var(--canvas-ease); }
.pulse-node:hover,.pulse-node.is-active { color:var(--pulse-accent-ink); background:var(--pulse-surface); border-color:var(--pulse-accent); transform:translateY(-3px); }
.pulse-node>span { display:block; font-size:7px; letter-spacing:.16em; }.pulse-node strong { display:block; margin-top:7px; font-size:clamp(11px,1vw,15px); }.pulse-node small { font-size:7px; letter-spacing:.12em; }
.pulse-node>i { position:absolute; right:8px; top:8px; width:5px; height:5px; background:currentColor; border-radius:50%; }
.pulse-readout { min-height:0; grid-column:3; grid-row:1/-1; padding:clamp(18px,3vw,46px); border-left:1px solid color-mix(in srgb,var(--pulse-accent) 14%,transparent); }
.pulse-panel { display:flex; flex-direction:column; justify-content:center; height:100%; }
.pulse-panel__eyebrow { color:var(--pulse-accent); font-size:8px; font-weight:700; letter-spacing:.18em; }
.pulse-panel h2 { margin:clamp(13px,2.5dvh,25px) 0 0; font-size:clamp(22px,2.2vw,34px); line-height:1.13; }
.pulse-panel>p { display:-webkit-box; margin:14px 0 0; overflow:hidden; color:var(--pulse-muted); font-size:clamp(10px,.9vw,13px); -webkit-box-orient:vertical; -webkit-line-clamp:4; }
.pulse-panel__chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:clamp(14px,2.4dvh,24px); }
.pulse-panel__chips span { padding:5px 7px; color:var(--pulse-accent); font-size:7px; letter-spacing:.1em; border:1px solid color-mix(in srgb,var(--pulse-accent) 28%,transparent); }
.pulse-panel:not(.is-active) { display:none; }
.pulse-panel>a { display:flex; align-items:center; justify-content:space-between; min-height:44px; margin-top:auto; padding:10px 12px; color:var(--pulse-accent-ink); background:var(--pulse-surface); font-size:8px; font-weight:700; letter-spacing:.12em; }
.pulse-panel>a i { font-size:15px; font-style:normal; }
.pulse-footer>div { display:flex; gap:clamp(15px,3vw,38px); }.pulse-footer>div a:hover,.pulse-footer>a { color:var(--pulse-accent); }
@keyframes pulseBlink { 50% { opacity:.35; box-shadow:0 0 2px var(--pulse-accent); } }

/* -------------------------------------------------------------------------- */
/* 09 — Bright Playground                                                     */
/* -------------------------------------------------------------------------- */

.viewport-layout.layout-09 {
  --play-accent:var(--tone-accent-on-light,var(--tone-accent,#c73824));
  --play-accent-surface:var(--tone-accent-surface,var(--tone-accent,#ff5d3d));
  --play-accent-ink:var(--tone-accent-ink,#211211);
  --play-bg:var(--tone-bg-light,color-mix(in srgb,var(--tone-accent-surface,var(--tone-accent,#ff5d3d)) 7%,#fff9e9));
  --play-ink:var(--tone-text-on-light,color-mix(in srgb,var(--tone-bg-dark,#172234) 92%,#000));
  --play-muted:var(--tone-text-muted-light,color-mix(in srgb,var(--tone-bg-dark,#172234) 68%,#fff));
  display:grid; grid-template-rows:clamp(58px,7.5dvh,72px) minmax(0,1fr) clamp(28px,4dvh,40px); color:var(--play-ink); background:var(--play-bg);
}
.play-masthead,.play-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-inline:clamp(16px,3vw,48px); border-color:color-mix(in srgb,var(--play-ink) 18%,transparent); }
.play-masthead { border-bottom:2px solid var(--play-ink); }
.play-footer { border-top:2px solid var(--play-ink); font-size:8px; font-weight:700; letter-spacing:.14em; }
.play-brand { display:flex; align-items:center; gap:10px; }
.play-brand>span { display:flex; }
.play-brand>span i { display:grid; place-items:center; width:28px; height:28px; color:var(--play-accent-ink); background:var(--play-accent-surface); border:2px solid var(--play-ink); border-radius:50%; font-style:normal; font-weight:800; }
.play-brand>span i+ i { margin-left:-5px; color:var(--play-bg); background:var(--play-ink); }
.play-brand strong { font-size:clamp(16px,1.4vw,21px); }
.play-masthead>p { margin:0 auto; color:var(--play-muted); font-size:8px; font-weight:700; letter-spacing:.18em; }
.play-promo { display:grid; grid-template-columns:24px minmax(0,180px) 24px; align-items:center; gap:8px; min-height:40px; padding:5px 7px; cursor:pointer; color:var(--play-ink); background:#fff; border:2px solid var(--play-ink); border-radius:999px; box-shadow:3px 3px 0 var(--play-ink); }
.play-promo>span { display:grid; place-items:center; width:24px; height:24px; color:var(--play-accent-ink); background:var(--play-accent-surface); border:1px solid var(--play-ink); border-radius:50%; }
.play-promo strong { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.play-promo b { font-size:10px; }
.play-board { min-height:0; display:grid; grid-template-columns:minmax(230px,29%) minmax(0,1fr) minmax(130px,16%); gap:clamp(12px,2vw,28px); padding:clamp(14px,2.3vw,34px); overflow:hidden; background-image:radial-gradient(color-mix(in srgb,var(--play-ink) 14%,transparent) 1px,transparent 1px); background-size:18px 18px; }
.play-hero { position:relative; display:flex; flex-direction:column; justify-content:center; min-height:0; padding:clamp(17px,2.5vw,38px); overflow:hidden; background:#fff; border:2px solid var(--play-ink); border-radius:clamp(18px,2vw,32px); box-shadow:7px 7px 0 var(--play-ink); }
.play-hero>span { color:var(--play-accent); font-size:8px; font-weight:800; letter-spacing:.16em; }
.play-hero h1 { position:relative; z-index:1; margin:clamp(12px,2dvh,20px) 0 0; font-size:clamp(31px,3.6vw,56px); font-weight:700; line-height:1.25; letter-spacing:0; }
.play-hero h1 em { display:inline-block; margin-top:5px; padding:3px 7px; color:var(--play-accent-ink); background:var(--play-accent-surface); border:2px solid var(--play-ink); border-radius:9px; font-size:.58em; font-style:normal; line-height:1.2; letter-spacing:0; transform:rotate(-2deg); }
.play-hero>p { position:relative; z-index:1; max-width:30ch; margin-top:auto; color:var(--play-muted); font-size:10px; }
.play-sun { position:absolute; right:-45px; top:-45px; display:grid; place-items:center; width:135px; aspect-ratio:1; color:var(--play-accent-ink); background:var(--play-accent-surface); border:2px solid var(--play-ink); border-radius:50%; transform:rotate(10deg); }
.play-sun span { font-size:20px; font-weight:900; }.play-sun i { position:absolute; width:170px; height:3px; background:var(--play-ink); }.play-sun i:nth-child(2) { transform:rotate(30deg); }.play-sun i:nth-child(3) { transform:rotate(60deg); }.play-sun i:nth-child(4) { transform:rotate(90deg); }.play-sun i:nth-child(5) { transform:rotate(120deg); }.play-sun i:nth-child(6) { transform:rotate(150deg); }
.play-products { min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(9px,1.3vw,18px); }
.play-card { min-height:0; transition:transform .3s var(--canvas-ease); }
.play-card:nth-child(2) { transform:translateY(clamp(13px,2.5dvh,25px)); }.play-card:nth-child(3) { transform:rotate(1.2deg); }
.play-card:hover,.play-card.is-active { position:relative; z-index:2; transform:translateY(-5px) rotate(-1deg); }
.play-card>a { display:flex; flex-direction:column; height:100%; min-height:0; padding:clamp(12px,1.6vw,24px); overflow:hidden; color:var(--play-ink); background:color-mix(in srgb,var(--play-accent-surface) 11%,#fff); border:2px solid var(--play-ink); border-radius:clamp(16px,1.6vw,25px); box-shadow:5px 5px 0 var(--play-ink); }
.play-card:nth-child(2)>a { background:color-mix(in srgb,var(--play-accent-surface) 20%,#fff0a8); }.play-card:nth-child(3)>a { background:color-mix(in srgb,var(--play-accent-surface) 17%,#baf4dd); }
.play-card__badge { display:grid; place-items:center; width:31px; height:31px; font-weight:800; background:#fff; border:2px solid var(--play-ink); border-radius:50%; }
.play-card__sticker { align-self:center; display:grid; place-items:center; width:min(8vw,94px); aspect-ratio:1; margin:auto; color:var(--play-accent-ink); background:var(--play-accent-surface); border:2px solid var(--play-ink); border-radius:32% 68% 55% 45%/44% 42% 58% 56%; font-size:clamp(22px,3vw,46px); font-weight:900; transform:rotate(-7deg); }
.play-card:nth-child(2) .play-card__sticker { border-radius:18px; transform:rotate(5deg); }.play-card:nth-child(3) .play-card__sticker { border-radius:50% 20% 50% 20%; transform:rotate(12deg); }
.play-card__copy { display:flex; flex-direction:column; }
.play-card__copy small { font-size:7px; font-weight:800; letter-spacing:.14em; }.play-card__copy>strong { font-size:clamp(18px,1.7vw,27px); line-height:1.1; }
.play-card__copy h2 { display:-webkit-box; margin:7px 0 0; overflow:hidden; font-size:clamp(10px,.82vw,13px); line-height:1.3; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.play-card__copy>div { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }.play-card__copy>div span { padding:3px 5px; background:#fff; border:1px solid var(--play-ink); border-radius:999px; font-size:6px; font-weight:700; }
.play-card__go { display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:8px; border-top:2px solid var(--play-ink); font-size:9px; }.play-card__go i { font-size:16px; font-style:normal; }
.play-note { align-self:center; padding:clamp(13px,1.6vw,22px); text-align:center; background:#fff; border:2px solid var(--play-ink); border-radius:13px; box-shadow:5px 5px 0 var(--play-ink); transform:rotate(2deg); }
.play-note>span { display:grid; place-items:center; width:48px; height:48px; margin:0 auto; color:var(--play-accent-ink); background:var(--play-accent-surface); border:2px solid var(--play-ink); border-radius:50%; font-size:25px; }
.play-note p { margin:13px 0 8px; color:var(--play-muted); font-size:7px; font-weight:800; letter-spacing:.1em; }.play-note strong { font-size:clamp(12px,1.1vw,16px); line-height:1.35; }
.play-footer>div { display:flex; gap:5px; }.play-footer>div i { width:7px; height:7px; background:var(--play-accent-surface); border:1px solid var(--play-ink); border-radius:50%; }

/* -------------------------------------------------------------------------- */
/* 10 — Quiet Grid                                                            */
/* -------------------------------------------------------------------------- */

.viewport-layout.layout-10 {
  --quiet-accent:var(--tone-accent-on-light,var(--tone-accent,#315d50));
  --quiet-surface:var(--tone-accent-surface,var(--tone-accent,#315d50));
  --quiet-accent-ink:var(--tone-accent-ink,#fff);
  --quiet-bg:var(--tone-bg-light,color-mix(in srgb,var(--tone-accent-surface,var(--tone-accent,#315d50)) 4%,#f5f4ef));
  --quiet-ink:var(--tone-text-on-light,color-mix(in srgb,var(--tone-bg-dark,#151a18) 94%,#000));
  --quiet-muted:var(--tone-text-muted-light,color-mix(in srgb,var(--tone-bg-dark,#151a18) 68%,#fff));
  display:grid; grid-template-rows:clamp(54px,7dvh,66px) minmax(0,1fr) clamp(28px,4dvh,38px); color:var(--quiet-ink); background:var(--quiet-bg);
}
.quiet-masthead,.quiet-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-inline:clamp(17px,3.2vw,52px); border-color:color-mix(in srgb,var(--quiet-ink) 18%,transparent); }
.quiet-masthead { border-bottom:1px solid color-mix(in srgb,var(--quiet-ink) 20%,transparent); }.quiet-footer { border-top:1px solid color-mix(in srgb,var(--quiet-ink) 20%,transparent); color:var(--quiet-muted); font-size:8px; letter-spacing:.12em; }
.quiet-brand { display:flex; align-items:baseline; gap:5px; font-size:clamp(16px,1.4vw,21px); }.quiet-brand b { color:var(--quiet-accent); font-size:1.25em; }.quiet-brand span { font-weight:500; }
.quiet-masthead>p { margin:0 auto; color:var(--quiet-muted); font-size:9px; }
.quiet-promo { display:grid; grid-template-columns:auto minmax(0,170px) 20px; align-items:center; gap:8px; min-height:36px; padding:5px 6px 5px 11px; cursor:pointer; color:var(--quiet-ink); background:transparent; border:1px solid color-mix(in srgb,var(--quiet-ink) 24%,transparent); }
.quiet-promo span { color:var(--quiet-accent); font-size:8px; }.quiet-promo strong { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.quiet-promo b { display:grid; place-items:center; width:20px; height:20px; color:var(--quiet-accent-ink); background:var(--quiet-surface); font-size:8px; }
.quiet-grid { min-height:0; display:grid; grid-template-columns:minmax(235px,30%) minmax(0,1fr) minmax(70px,8%); overflow:hidden; }
.quiet-intro { display:flex; flex-direction:column; justify-content:center; min-height:0; padding:clamp(25px,4.3vw,70px); border-right:1px solid color-mix(in srgb,var(--quiet-ink) 18%,transparent); }
.quiet-intro>span { color:var(--quiet-accent); font-size:8px; font-weight:700; letter-spacing:.18em; }
.quiet-intro h1 { margin:clamp(14px,3dvh,28px) 0 0; font-size:clamp(34px,4.2vw,67px); font-weight:500; line-height:1.25; letter-spacing:0; }.quiet-intro h1 em { color:var(--quiet-accent); font-style:normal; }
.quiet-intro p { max-width:28ch; margin-top:auto; color:var(--quiet-muted); font-size:10px; }
.quiet-list { min-height:0; display:flex; flex-direction:column; }
.quiet-row { min-height:0; flex:0 0 clamp(62px,9dvh,88px); display:grid; grid-template-columns:minmax(0,1fr); border-bottom:1px solid color-mix(in srgb,var(--quiet-ink) 18%,transparent); transition:flex .35s var(--canvas-ease),background .25s; }
.quiet-row:last-child { border-bottom:0; }.quiet-row.is-active { flex:1 1 auto; background:color-mix(in srgb,var(--quiet-accent) 6%,transparent); }
.quiet-row__control { display:grid; grid-template-columns:42px minmax(100px,1fr) minmax(80px,.5fr) 28px; align-items:center; gap:14px; width:100%; padding:0 clamp(18px,2.5vw,38px); cursor:pointer; text-align:left; color:var(--quiet-ink); background:transparent; border:0; }
.quiet-row__control>span { color:var(--quiet-muted); font-size:9px; }.quiet-row__control>strong { font-size:clamp(18px,1.8vw,28px); font-weight:500; }.quiet-row__control>small { color:var(--quiet-muted); font-size:8px; letter-spacing:.14em; }
.quiet-row__control>i { position:relative; width:22px; height:22px; border:1px solid color-mix(in srgb,var(--quiet-ink) 28%,transparent); border-radius:50%; }.quiet-row__control>i::before,.quiet-row__control>i::after { content:""; position:absolute; left:5px; right:5px; top:10px; height:1px; background:currentColor; }.quiet-row__control>i::after { transform:rotate(90deg); transition:transform .25s; }.quiet-row.is-active .quiet-row__control>i { color:var(--quiet-accent-ink); background:var(--quiet-surface); border-color:var(--quiet-accent); }.quiet-row.is-active .quiet-row__control>i::after { transform:rotate(0); }
.quiet-row:not(.is-active) .quiet-row__panel { display:none; }
.quiet-row__panel { min-height:0; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); grid-template-rows:auto auto; column-gap:clamp(18px,3vw,44px); align-content:center; padding:clamp(12px,2dvh,22px) clamp(18px,2.5vw,38px) clamp(16px,3dvh,30px) 94px; border-top:1px solid color-mix(in srgb,var(--quiet-ink) 10%,transparent); }
.quiet-row__panel h2 { margin:0; font-size:clamp(17px,1.65vw,26px); font-weight:500; line-height:1.2; }.quiet-row__panel>p { display:-webkit-box; margin:9px 0 0; overflow:hidden; color:var(--quiet-muted); font-size:clamp(9px,.8vw,12px); line-height:1.5; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.quiet-row__panel>div { display:flex; flex-direction:column; gap:5px; grid-column:2; grid-row:1; }.quiet-row__panel>div span { color:var(--quiet-muted); font-size:8px; letter-spacing:.12em; }.quiet-row__panel>div span::before { content:"—"; margin-right:8px; color:var(--quiet-accent); }
.quiet-row__panel>a { align-self:end; display:flex; justify-content:space-between; min-height:40px; grid-column:2; padding:10px 12px; color:var(--quiet-accent-ink); background:var(--quiet-surface); font-size:9px; font-weight:700; letter-spacing:.08em; }.quiet-row__panel>a i { font-style:normal; }
.quiet-index { display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:clamp(16px,3dvh,30px) 8px; border-left:1px solid color-mix(in srgb,var(--quiet-ink) 18%,transparent); }
.quiet-index>span { color:var(--quiet-accent); font-size:8px; letter-spacing:.12em; writing-mode:vertical-rl; }.quiet-index p { margin:0; color:var(--quiet-muted); font-size:7px; line-height:2.2; letter-spacing:.12em; writing-mode:vertical-rl; }.quiet-index i { width:8px; height:8px; background:var(--quiet-surface); border-radius:50%; }
.quiet-footer nav { display:flex; gap:clamp(16px,3vw,42px); }.quiet-footer nav a:hover,.quiet-footer>a { color:var(--quiet-accent); }

/* -------------------------------------------------------------------------- */
/* 11 — Vintage Bureau                                                        */
/* -------------------------------------------------------------------------- */

.viewport-layout.layout-11 {
  --bureau-accent:var(--tone-accent-on-light,var(--tone-accent,#a33a25));
  --bureau-surface:var(--tone-accent-surface,var(--tone-accent,#a33a25));
  --bureau-accent-ink:var(--tone-accent-ink,#fff8e5);
  --bureau-bg:var(--tone-bg-light,color-mix(in srgb,var(--tone-accent-surface,var(--tone-accent,#a33a25)) 5%,#d9cda9));
  --bureau-paper:color-mix(in srgb,var(--bureau-bg) 82%,#fff);
  --bureau-ink:var(--tone-text-on-light,color-mix(in srgb,var(--tone-bg-dark,#30291f) 91%,#000));
  --bureau-muted:var(--tone-text-muted-light,color-mix(in srgb,var(--tone-bg-dark,#30291f) 82%,#fff));
  display:grid; grid-template-rows:clamp(62px,8dvh,78px) minmax(0,1fr) clamp(29px,4dvh,40px); color:var(--bureau-ink); background:var(--bureau-bg);
}
.viewport-layout.layout-11::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; opacity:.25; background-image:repeating-linear-gradient(0deg,transparent 0 3px,rgba(48,41,31,.035) 3px 4px); }
.bureau-masthead,.bureau-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-inline:clamp(16px,3vw,48px); border-color:color-mix(in srgb,var(--bureau-ink) 40%,transparent); }
.bureau-masthead { border-bottom:3px double color-mix(in srgb,var(--bureau-ink) 55%,transparent); }.bureau-footer { border-top:3px double color-mix(in srgb,var(--bureau-ink) 55%,transparent); font-family:Georgia,"Noto Serif Thai",serif; font-size:8px; letter-spacing:.11em; }
.bureau-brand { display:grid; grid-template-columns:auto auto; align-items:center; column-gap:7px; font-family:Georgia,"Noto Serif Thai",serif; line-height:1; }.bureau-brand>span { grid-row:1/3; display:grid; place-items:center; width:39px; height:39px; color:var(--bureau-accent-ink); background:var(--bureau-surface); border:2px solid var(--bureau-ink); border-radius:50%; font-size:18px; font-weight:700; }.bureau-brand strong { font-size:17px; letter-spacing:.08em; }.bureau-brand small { font-size:6px; letter-spacing:.2em; }
.bureau-edition { display:flex; flex-direction:column; margin-left:auto; text-align:right; font-family:Georgia,"Noto Serif Thai",serif; }.bureau-edition b { font-size:8px; letter-spacing:.13em; }.bureau-edition span { color:var(--bureau-muted); font-size:7px; }
.bureau-promo { display:grid; grid-template-columns:auto minmax(0,170px) 24px; align-items:center; gap:8px; min-height:39px; padding:4px 6px 4px 10px; cursor:pointer; text-align:left; color:var(--bureau-ink); background:var(--bureau-paper); border:1px solid var(--bureau-ink); box-shadow:2px 2px 0 color-mix(in srgb,var(--bureau-ink) 70%,transparent); }.bureau-promo span { color:var(--bureau-accent); font-family:Georgia,serif; font-size:6px; letter-spacing:.14em; }.bureau-promo strong { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.bureau-promo b { display:grid; place-items:center; width:24px; height:24px; color:var(--bureau-accent-ink); background:var(--bureau-surface); border-radius:50%; }
.bureau-desk { min-height:0; display:grid; grid-template-columns:minmax(230px,28%) minmax(86px,9%) minmax(320px,46%) minmax(130px,17%); padding:clamp(14px,2.4vw,36px); overflow:hidden; }
.bureau-intro { position:relative; display:flex; flex-direction:column; justify-content:center; padding:clamp(17px,2.8vw,44px); background:var(--bureau-paper); border:1px solid color-mix(in srgb,var(--bureau-ink) 50%,transparent); box-shadow:5px 5px 0 color-mix(in srgb,var(--bureau-ink) 30%,transparent); transform:rotate(-.6deg); }
.bureau-intro>span { color:var(--bureau-accent); font-family:Georgia,serif; font-size:7px; font-weight:700; letter-spacing:.16em; }.bureau-intro h1 { margin:clamp(13px,2.5dvh,25px) 0 0; font-family:Georgia,"Noto Serif Thai",serif; font-size:clamp(31px,3.7vw,58px); font-weight:600; line-height:1.25; letter-spacing:0; }.bureau-intro h1 em { color:var(--bureau-accent); font-style:normal; }.bureau-intro>p { max-width:31ch; margin-top:auto; color:var(--bureau-muted); font-size:10px; }
.bureau-stamp { position:absolute; right:17px; bottom:16px; display:flex; align-items:center; gap:5px; padding:6px; color:var(--bureau-accent); border:2px solid var(--bureau-accent); border-radius:50%; opacity:.72; transform:rotate(-11deg); }.bureau-stamp b { font-family:Georgia,serif; font-size:19px; }.bureau-stamp span { font-size:5px; font-weight:800; line-height:1.1; letter-spacing:.06em; }
.bureau-files { align-self:center; display:flex; flex-direction:column; gap:4px; margin-left:clamp(8px,1vw,15px); }
.bureau-tab { min-height:100px; padding:10px 8px; cursor:pointer; text-align:left; color:var(--bureau-muted); background:color-mix(in srgb,var(--bureau-paper) 82%,var(--bureau-bg)); border:1px solid color-mix(in srgb,var(--bureau-ink) 40%,transparent); border-right:0; border-radius:10px 0 0 10px; transition:color .2s,background .2s,transform .25s; }.bureau-tab:hover,.bureau-tab.is-active { color:var(--bureau-ink); background:var(--bureau-paper); transform:translateX(3px); }.bureau-tab>span { display:block; font-family:Georgia,serif; font-size:8px; }.bureau-tab strong { display:block; margin-top:8px; font-family:Georgia,"Noto Serif Thai",serif; font-size:clamp(11px,1vw,15px); writing-mode:vertical-rl; }.bureau-tab small { display:block; margin-top:6px; color:var(--bureau-accent); font-size:6px; letter-spacing:.08em; writing-mode:vertical-rl; }
.bureau-folder { position:relative; z-index:1; min-height:0; padding:clamp(20px,3vw,44px); background:var(--bureau-paper); border:1px solid color-mix(in srgb,var(--bureau-ink) 52%,transparent); box-shadow:7px 7px 0 color-mix(in srgb,var(--bureau-ink) 22%,transparent); }
.bureau-folder::before { content:"CONFIDENTIAL · OK PROGRAMD"; position:absolute; right:17px; top:14px; color:var(--bureau-accent); font-family:Georgia,serif; font-size:6px; letter-spacing:.14em; }
.bureau-panel { display:flex; flex-direction:column; height:100%; }
.bureau-panel__head { display:flex; justify-content:space-between; padding-bottom:9px; border-bottom:3px double color-mix(in srgb,var(--bureau-ink) 48%,transparent); font-family:Georgia,serif; font-size:7px; letter-spacing:.12em; }
.bureau-panel__identity { display:flex; align-items:center; gap:13px; margin-top:clamp(12px,2dvh,20px); }.bureau-panel__monogram { display:grid; place-items:center; width:clamp(52px,5vw,72px); aspect-ratio:1; flex:0 0 auto; color:var(--bureau-accent-ink); background:var(--bureau-surface); border:2px solid var(--bureau-ink); border-radius:50%; font-family:Georgia,serif; font-size:clamp(20px,2vw,30px); font-weight:700; }.bureau-panel__identity>div { display:flex; flex-direction:column; }.bureau-panel__identity strong { font-family:Georgia,"Noto Serif Thai",serif; font-size:clamp(23px,2.3vw,36px); line-height:1; }.bureau-panel__identity small { color:var(--bureau-muted); font-size:8px; }
.bureau-panel h2 { margin:clamp(12px,2dvh,20px) 0 0; font-family:Georgia,"Noto Serif Thai",serif; font-size:clamp(17px,1.65vw,25px); line-height:1.2; }.bureau-panel>p { display:-webkit-box; margin:9px 0 0; overflow:hidden; color:var(--bureau-muted); font-size:clamp(9px,.78vw,12px); line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.bureau-panel__features { display:flex; flex-wrap:wrap; gap:6px 13px; margin-top:clamp(11px,2dvh,19px); }.bureau-panel__features span { font-family:Georgia,serif; font-size:7px; letter-spacing:.08em; }
.bureau-panel:not(.is-active) { display:none; }
.bureau-panel>a { display:flex; justify-content:space-between; min-height:42px; margin-top:auto; padding:10px 12px; color:var(--bureau-accent-ink); background:var(--bureau-surface); border:1px solid var(--bureau-ink); font-family:Georgia,serif; font-size:8px; font-weight:700; letter-spacing:.1em; }.bureau-panel>a i { font-size:15px; font-style:normal; }
.bureau-card { align-self:center; padding:clamp(13px,1.6vw,23px); background:color-mix(in srgb,var(--bureau-paper) 86%,var(--bureau-bg)); border:1px solid color-mix(in srgb,var(--bureau-ink) 50%,transparent); box-shadow:4px 4px 0 color-mix(in srgb,var(--bureau-ink) 24%,transparent); transform:rotate(2.5deg) translateX(-3px); }.bureau-card>span { color:var(--bureau-accent); font-family:Georgia,serif; font-size:7px; letter-spacing:.14em; }.bureau-card strong { display:block; margin-top:clamp(15px,3dvh,28px); font-family:Georgia,"Noto Serif Thai",serif; font-size:clamp(16px,1.5vw,22px); line-height:1.25; }.bureau-card p { margin:clamp(15px,3dvh,28px) 0 0; color:var(--bureau-muted); font-size:6px; letter-spacing:.09em; }
.bureau-footer>div { color:var(--bureau-accent); letter-spacing:.5em; }.bureau-footer>a { color:var(--bureau-accent); }

/* -------------------------------------------------------------------------- */
/* Compact desktop and short landscape                                        */
/* -------------------------------------------------------------------------- */

@media (max-height:700px) and (min-width:700px) {
  .atelier-piece__crest,.atelier-piece .solution-media { width:min(8vw,74px); }.atelier-piece__reveal h2 { -webkit-line-clamp:1; }.atelier-piece__reveal>div { display:none; }
  .pulse-intro h1 { font-size:clamp(33px,4vw,58px); }.pulse-panel>p { -webkit-line-clamp:2; }.pulse-orb { width:min(15vw,24dvh); }
  .play-board { padding:11px 18px; }.play-card__sticker { width:min(6vw,61px); }.play-card__copy h2 { -webkit-line-clamp:1; }.play-card__copy>div { display:none; }.play-note strong { font-size:11px; }
  .quiet-intro h1 { font-size:clamp(34px,4.1vw,58px); }.quiet-row { flex-basis:57px; }.quiet-row__panel { padding-block:9px 14px; }.quiet-row__panel>p { -webkit-line-clamp:2; }
  .bureau-desk { padding:11px 20px; }.bureau-tab { min-height:75px; }.bureau-panel>p { -webkit-line-clamp:2; }.bureau-panel__features { margin-top:8px; }.bureau-card strong { margin-top:12px; }
}

/* -------------------------------------------------------------------------- */
/* Mobile — each composition remains a single viewport                        */
/* -------------------------------------------------------------------------- */

@media (max-width:820px) {
  .promotion-dialog,.promo-dialog { width:calc(100vw - 20px); max-height:88dvh; border-radius:16px; }.promotion-dialog__head,.promo-dialog__head,.promo-dialog__header { min-height:58px; padding:10px 12px 10px 16px; }.promo-dialog__surface { max-height:88dvh; }.promotion-card,.promo-dialog__item { grid-template-columns:1fr; padding:13px; }.promotion-card a,.promo-dialog__item a { width:100%; }.promo-dialog__footer { min-height:48px; }

  .viewport-layout.layout-07 { grid-template-columns:1fr; grid-template-rows:46px minmax(0,1fr); }
  .atelier-rail { flex-direction:row; gap:12px; padding:6px 14px; border-right:0; border-bottom:1px solid color-mix(in srgb,var(--atelier-gold) 25%,transparent); }.atelier-seal { width:34px; }.atelier-seal span { font-size:13px; }.atelier-seal b { font-size:5px; }.atelier-rail>p { margin:0; font-size:6px; writing-mode:horizontal-tb; transform:none; }.atelier-rail__line { width:auto; height:1px; min-height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--atelier-gold),transparent); }.atelier-rail>span { font-size:6px; writing-mode:horizontal-tb; }
  .atelier-main { grid-template-rows:42px minmax(0,1fr) 24px; }.atelier-masthead,.atelier-footer { gap:10px; padding-inline:13px; }.atelier-masthead>p { font-size:6px; }.atelier-masthead nav { display:none; }.atelier-promo { grid-template-columns:auto minmax(0,100px) 19px; min-height:31px; margin-left:auto; }.atelier-promo span { font-size:5px; }.atelier-promo b { width:19px; height:19px; }.atelier-canvas { grid-template-columns:1fr; grid-template-rows:minmax(145px,34%) minmax(0,1fr); }.atelier-canvas::before { top:5%; left:auto; right:-15%; }.atelier-intro { justify-content:center; padding:15px 18px; border-right:0; border-bottom:1px solid color-mix(in srgb,var(--atelier-gold) 20%,transparent); }.atelier-intro>p { margin-bottom:8px; font-size:6px; }.atelier-intro h1 { font-size:clamp(24px,7.8vw,34px); line-height:1.25; }.atelier-intro h1 br:nth-of-type(2) { display:none; }.atelier-intro>span { margin-top:8px; font-size:8px; }.atelier-collection { grid-template-columns:1fr; grid-template-rows:repeat(3,minmax(0,1fr)); gap:6px; padding:10px 13px; }.atelier-piece,.atelier-piece:nth-child(2),.atelier-piece:nth-child(3),.atelier-piece:hover,.atelier-piece.is-active { transform:none; }.atelier-piece>a { display:grid; grid-template-columns:29px 45px minmax(0,1fr) auto; align-items:center; gap:9px; padding:7px 10px; }.atelier-piece__number { align-self:center; font-size:8px; }.atelier-piece__crest { width:39px; margin:0; }.atelier-piece__crest::before,.atelier-piece__crest::after { width:29px; }.atelier-piece__crest span { font-size:19px; }.atelier-piece__identity { padding:0; border:0; }.atelier-piece__identity small { font-size:5px; }.atelier-piece__identity strong { margin-top:2px; font-size:16px; }.atelier-piece__identity span { font-size:7px; }.atelier-piece__reveal h2,.atelier-piece__reveal>div { display:none; }.atelier-piece__reveal>b { width:46px; margin:0; font-size:6px; }.atelier-footer { font-size:6px; }.atelier-footer p { display:none; }

  .viewport-layout.layout-08 { grid-template-rows:48px minmax(0,1fr) 25px; }.pulse-masthead,.pulse-footer { gap:10px; padding-inline:13px; }.pulse-brand__glyph { width:25px; height:25px; }.pulse-brand strong { font-size:13px; }.pulse-system span { display:none; }.pulse-system { margin-left:auto; font-size:6px; }.pulse-promo { grid-template-columns:auto minmax(0,80px) 22px; min-height:33px; }.pulse-promo span { display:none; }.pulse-promo i { width:22px; height:22px; }.pulse-console { grid-template-columns:1fr; grid-template-rows:minmax(142px,31%) 64px minmax(0,1fr); }.pulse-intro { grid-row:1; padding:16px 18px; border-right:0; border-bottom:1px solid color-mix(in srgb,var(--pulse-accent) 14%,transparent); }.pulse-intro>span { margin-bottom:8px; font-size:6px; }.pulse-intro h1 { font-size:clamp(26px,8.5vw,36px); line-height:1.25; }.pulse-intro p { margin-top:7px; font-size:8px; }.pulse-visual { position:absolute; right:-15px; top:7px; width:150px; height:132px; opacity:.48; }.pulse-orb { width:82px; }.pulse-orb span { font-size:28px; }.pulse-coordinates { display:none; }.pulse-selector { grid-column:1; grid-row:2; gap:5px; padding:7px 12px; }.pulse-node { min-height:50px; padding:6px 8px; }.pulse-node>span { font-size:5px; }.pulse-node strong { margin-top:3px; font-size:11px; }.pulse-node small { font-size:5px; }.pulse-readout { grid-column:1; grid-row:3; padding:13px 17px; border-top:1px solid color-mix(in srgb,var(--pulse-accent) 14%,transparent); border-left:0; }.pulse-panel { justify-content:flex-start; }.pulse-panel__eyebrow { font-size:6px; }.pulse-panel h2 { margin:7px 0 0; font-size:clamp(17px,5vw,23px); }.pulse-panel>p { margin-top:7px; font-size:8px; line-height:1.4; -webkit-line-clamp:2; }.pulse-panel__chips { gap:4px; margin-top:8px; }.pulse-panel__chips span { padding:3px 5px; font-size:5px; }.pulse-panel>a { min-height:37px; margin-top:auto; padding:8px 10px; font-size:7px; }.pulse-footer { font-size:6px; }.pulse-footer>div { display:none; }

  .viewport-layout.layout-09 { grid-template-rows:50px minmax(0,1fr) 25px; }.play-masthead,.play-footer { gap:10px; padding-inline:12px; }.play-brand>span i { width:23px; height:23px; font-size:11px; }.play-brand strong { font-size:13px; }.play-masthead>p { display:none; }.play-promo { grid-template-columns:20px minmax(0,90px) 16px; min-height:34px; padding:3px 5px; box-shadow:2px 2px 0 var(--play-ink); }.play-promo>span { width:20px; height:20px; }.play-promo strong { font-size:7px; }.play-board { grid-template-columns:1fr; grid-template-rows:minmax(140px,32%) minmax(0,1fr); gap:9px; padding:10px 12px; }.play-hero { padding:14px 17px; border-radius:17px; box-shadow:4px 4px 0 var(--play-ink); }.play-hero>span { font-size:6px; }.play-hero h1 { margin-top:7px; font-size:clamp(26px,8vw,34px); line-height:1.25; }.play-hero h1 br:nth-of-type(2) { display:none; }.play-hero h1 em { font-size:.48em; line-height:1.2; }.play-hero>p { margin:5px 0 0; font-size:8px; }.play-sun { width:94px; right:-29px; top:-35px; }.play-sun i { width:118px; }.play-sun span { font-size:15px; }.play-products { grid-template-columns:1fr; grid-template-rows:repeat(3,minmax(0,1fr)); gap:6px; }.play-card,.play-card:nth-child(2),.play-card:nth-child(3),.play-card:hover,.play-card.is-active { transform:none; }.play-card>a { display:grid; grid-template-columns:26px 43px minmax(0,1fr) 52px; align-items:center; gap:8px; padding:6px 9px; border-radius:12px; box-shadow:3px 3px 0 var(--play-ink); }.play-card__badge { width:25px; height:25px; font-size:8px; }.play-card__sticker { width:40px; margin:0; font-size:17px; }.play-card__copy small { font-size:5px; }.play-card__copy>strong { font-size:15px; }.play-card__copy h2,.play-card__copy>div { display:none; }.play-card__go { margin:0; padding:0; border:0; font-size:6px; }.play-card__go i { font-size:13px; }.play-note { display:none; }.play-footer { font-size:6px; }

  .viewport-layout.layout-10 { grid-template-rows:48px minmax(0,1fr) 25px; }.quiet-masthead,.quiet-footer { gap:10px; padding-inline:13px; }.quiet-brand { font-size:14px; }.quiet-masthead>p { display:none; }.quiet-promo { grid-template-columns:auto minmax(0,90px) 18px; min-height:31px; }.quiet-promo strong { font-size:7px; }.quiet-promo b { width:18px; height:18px; }.quiet-grid { grid-template-columns:1fr; grid-template-rows:minmax(140px,31%) minmax(0,1fr); }.quiet-intro { justify-content:center; padding:15px 18px; border-right:0; border-bottom:1px solid color-mix(in srgb,var(--quiet-ink) 18%,transparent); }.quiet-intro>span { font-size:6px; }.quiet-intro h1 { margin-top:8px; font-size:clamp(26px,8.3vw,35px); line-height:1.25; }.quiet-intro h1 br:nth-of-type(2) { display:none; }.quiet-intro p { margin:6px 0 0; font-size:8px; }.quiet-list { grid-row:2; }.quiet-row { flex-basis:55px; }.quiet-row__control { grid-template-columns:27px 1fr 56px 23px; gap:8px; padding:0 14px; }.quiet-row__control>span { font-size:7px; }.quiet-row__control>strong { font-size:15px; }.quiet-row__control>small { font-size:6px; }.quiet-row__control>i { width:20px; height:20px; }.quiet-row__panel { grid-template-columns:1fr auto; column-gap:12px; padding:9px 14px 12px 49px; }.quiet-row__panel h2 { font-size:14px; }.quiet-row__panel>p { margin-top:5px; font-size:7px; -webkit-line-clamp:2; }.quiet-row__panel>div { gap:3px; }.quiet-row__panel>div span { font-size:6px; }.quiet-row__panel>a { min-height:32px; padding:7px 9px; font-size:6px; }.quiet-index { display:none; }.quiet-footer { font-size:6px; }.quiet-footer nav { display:none; }

  .viewport-layout.layout-11 { grid-template-rows:53px minmax(0,1fr) 26px; }.bureau-masthead,.bureau-footer { gap:9px; padding-inline:12px; }.bureau-brand>span { width:31px; height:31px; font-size:13px; }.bureau-brand strong { font-size:12px; }.bureau-brand small { font-size:4px; }.bureau-edition { display:none; }.bureau-promo { grid-template-columns:auto minmax(0,85px) 20px; min-height:34px; }.bureau-promo span { display:none; }.bureau-promo b { width:20px; height:20px; font-size:8px; }.bureau-desk { grid-template-columns:1fr; grid-template-rows:minmax(143px,30%) 55px minmax(0,1fr); padding:9px 12px; }.bureau-intro { justify-content:center; padding:13px 16px; box-shadow:3px 3px 0 color-mix(in srgb,var(--bureau-ink) 30%,transparent); transform:none; }.bureau-intro>span { font-size:5px; }.bureau-intro h1 { margin-top:7px; font-size:clamp(24px,7.8vw,33px); line-height:1.25; }.bureau-intro h1 br:nth-of-type(2) { display:none; }.bureau-intro>p { margin:5px 0 0; font-size:7px; }.bureau-stamp { right:12px; bottom:9px; transform:rotate(-8deg) scale(.76); transform-origin:right bottom; }.bureau-files { align-self:stretch; flex-direction:row; gap:4px; margin:7px 0 0; }.bureau-tab { min-height:48px; flex:1; padding:5px 8px; border-right:1px solid color-mix(in srgb,var(--bureau-ink) 40%,transparent); border-radius:7px 7px 0 0; }.bureau-tab:hover,.bureau-tab.is-active { transform:translateY(2px); }.bureau-tab>span { display:inline; font-size:6px; }.bureau-tab strong { margin:1px 0 0; font-size:10px; writing-mode:horizontal-tb; }.bureau-tab small { margin:0; font-size:5px; writing-mode:horizontal-tb; }.bureau-folder { padding:13px 16px; box-shadow:3px 3px 0 color-mix(in srgb,var(--bureau-ink) 22%,transparent); }.bureau-folder::before { right:12px; top:9px; font-size:4px; }.bureau-panel__head { padding-bottom:5px; font-size:5px; }.bureau-panel__identity { gap:9px; margin-top:7px; }.bureau-panel__monogram { width:42px; font-size:17px; }.bureau-panel__identity strong { font-size:21px; }.bureau-panel__identity small { font-size:6px; }.bureau-panel h2 { margin-top:7px; font-size:14px; }.bureau-panel>p { margin-top:5px; font-size:7px; line-height:1.35; -webkit-line-clamp:2; }.bureau-panel__features { gap:4px 8px; margin-top:7px; }.bureau-panel__features span { font-size:5px; }.bureau-panel>a { min-height:33px; padding:7px 9px; font-size:6px; }.bureau-card { display:none; }.bureau-footer { font-size:5px; }.bureau-footer>div { display:none; }
}

@media (max-width:380px) {
  .atelier-piece>a { grid-template-columns:23px 38px minmax(0,1fr) 42px; gap:6px; }.atelier-piece__crest { width:34px; }.atelier-piece__identity strong { font-size:14px; }
  .pulse-panel__chips span:nth-child(3),.quiet-row__panel>div span:nth-child(3),.bureau-panel__features span:nth-child(3) { display:none; }
  .play-card>a { grid-template-columns:22px 36px minmax(0,1fr) 45px; gap:6px; }.play-card__sticker { width:34px; }
}

@media (max-height:560px) and (max-width:699px) {
  .atelier-canvas,.play-board,.quiet-grid { grid-template-rows:minmax(108px,29%) minmax(0,1fr); }.atelier-intro h1,.play-hero h1,.quiet-intro h1,.bureau-intro h1 { font-size:28px; }.atelier-intro>span,.play-hero>p,.quiet-intro p,.bureau-intro>p { display:none; }.atelier-piece>a,.play-card>a { padding-block:4px; }
  .pulse-console { grid-template-rows:108px 52px minmax(0,1fr); }.pulse-intro h1 { font-size:28px; }.pulse-intro p { display:none; }.pulse-readout { padding-block:8px; }.pulse-panel>p,.pulse-panel__chips { display:none; }
  .quiet-row { flex-basis:42px; }.quiet-row__panel>p,.quiet-row__panel>div { display:none; }.quiet-row__panel { grid-template-columns:1fr auto; padding-block:5px; }
  .bureau-desk { grid-template-rows:108px 45px minmax(0,1fr); }.bureau-files { margin-top:4px; }.bureau-tab { min-height:40px; }.bureau-panel>p,.bureau-panel__features { display:none; }.bureau-panel__identity { margin-top:5px; }
}

/* Accessibility escape hatch for zoomed or unusually tiny viewports. */
@media (max-width:499px) and (max-height:300px) {
  html,body { height:auto; min-height:100%; overflow:auto; }
  .viewport-shell,.viewport-layout { height:auto; min-height:520px; overflow:visible; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* Dynamic promoted-site collections — the viewport stays fixed; collections scroll. */
.pulse-selector,.play-products,.quiet-list,.bureau-files { overscroll-behavior:contain; scrollbar-width:thin; }

.pulse-selector { overflow:auto hidden; scrollbar-color:color-mix(in srgb,var(--pulse-accent) 55%,transparent) transparent; }
.viewport-layout.layout-08.solution-count-0 .pulse-selector,
.viewport-layout.layout-08.solution-count-1 .pulse-selector { grid-template-columns:minmax(0,1fr); }
.viewport-layout.layout-08.solution-count-2 .pulse-selector { grid-template-columns:repeat(2,minmax(0,1fr)); }
.viewport-layout.layout-08.solution-count-4 .pulse-selector { grid-template-columns:repeat(4,minmax(0,1fr)); }
.viewport-layout.layout-08:is(.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .pulse-selector { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(112px,1fr); }
.pulse-panel { position:relative; }
.pulse-panel>.solution-media { position:absolute; right:0; top:0; width:clamp(40px,4.2vw,60px); aspect-ratio:1; border:1px solid color-mix(in srgb,var(--solution-card-accent,var(--pulse-accent)) 55%,transparent); border-radius:12px; box-shadow:0 0 20px color-mix(in srgb,var(--solution-card-accent,var(--pulse-accent)) 14%,transparent); }
.pulse-readout>.solution-empty { height:100%; border-color:color-mix(in srgb,var(--pulse-accent) 34%,transparent); }

.play-products { align-content:stretch; overflow:auto; scrollbar-color:color-mix(in srgb,var(--play-accent) 55%,transparent) transparent; }
.viewport-layout.layout-09.solution-count-0 .play-products,
.viewport-layout.layout-09.solution-count-1 .play-products { grid-template-columns:minmax(0,1fr); }
.viewport-layout.layout-09.solution-count-2 .play-products { grid-template-columns:repeat(2,minmax(0,1fr)); }
.viewport-layout.layout-09.solution-count-4 .play-products { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
.viewport-layout.layout-09:is(.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .play-products { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:minmax(230px,1fr); align-content:start; }
.viewport-layout.layout-09:is(.solution-count-4,.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .play-card,
.viewport-layout.layout-09:is(.solution-count-4,.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .play-card:hover,
.viewport-layout.layout-09:is(.solution-count-4,.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .play-card.is-active { transform:none; }
.viewport-layout.layout-09:is(.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .play-card__copy h2 { -webkit-line-clamp:1; }

.quiet-list { overflow-y:auto; scrollbar-color:color-mix(in srgb,var(--quiet-accent) 55%,transparent) transparent; }
.quiet-list>.solution-empty { flex:1 1 auto; margin:clamp(16px,3vw,36px); border-color:color-mix(in srgb,var(--quiet-ink) 30%,transparent); }
.quiet-row__panel { position:relative; }
.quiet-row__panel>.solution-media { position:absolute; left:38px; top:50%; width:42px; aspect-ratio:1; border:1px solid color-mix(in srgb,var(--solution-card-accent,var(--quiet-accent)) 52%,transparent); border-radius:50%; transform:translateY(-50%); }
.quiet-footer nav { max-width:52%; overflow:auto hidden; overscroll-behavior-inline:contain; scrollbar-width:thin; white-space:nowrap; }
.viewport-layout.layout-10:is(.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .quiet-row { flex:0 0 70px; }
.viewport-layout.layout-10:is(.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .quiet-row.is-active { flex:0 0 clamp(210px,32dvh,260px); }

.bureau-files { min-height:0; max-height:100%; overflow:hidden auto; scrollbar-color:color-mix(in srgb,var(--bureau-accent) 55%,transparent) transparent; }
.viewport-layout.layout-11:is(.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .bureau-tab { min-height:84px; flex:0 0 84px; }
.bureau-folder>.solution-empty { height:100%; border-color:color-mix(in srgb,var(--bureau-ink) 30%,transparent); }
.viewport-layout.layout-11.solution-count-0 .bureau-desk { grid-template-columns:minmax(230px,32%) minmax(320px,51%) minmax(130px,17%); }
.viewport-layout.layout-11.solution-count-0 .bureau-files { display:none; }

@media (max-width:820px) {
  .atelier-piece .solution-media { width:39px; margin:0; box-shadow:none; }
  .viewport-layout.layout-07.solution-count-0 .atelier-collection,
  .viewport-layout.layout-07.solution-count-1 .atelier-collection { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr); }
  .viewport-layout.layout-07.solution-count-2 .atelier-collection { grid-template-columns:1fr; grid-template-rows:repeat(2,minmax(0,1fr)); }
  .viewport-layout.layout-07.solution-count-4 .atelier-collection { grid-template-columns:1fr; grid-template-rows:repeat(4,minmax(0,1fr)); }
  .viewport-layout.layout-07:is(.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .atelier-collection { grid-template-columns:1fr; grid-template-rows:none; grid-auto-rows:minmax(62px,1fr); align-content:start; overflow-y:auto; }

  .viewport-layout.layout-08.solution-count-4 .pulse-selector { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .viewport-layout.layout-08:is(.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .pulse-selector { grid-template-columns:none; grid-auto-columns:minmax(92px,1fr); }
  .pulse-panel>.solution-media { width:36px; border-radius:9px; }
  .pulse-panel__eyebrow { padding-right:42px; }

  .viewport-layout.layout-09.solution-count-0 .play-products,
  .viewport-layout.layout-09.solution-count-1 .play-products { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr); }
  .viewport-layout.layout-09.solution-count-2 .play-products { grid-template-columns:1fr; grid-template-rows:repeat(2,minmax(0,1fr)); }
  .viewport-layout.layout-09.solution-count-4 .play-products { grid-template-columns:1fr; grid-template-rows:repeat(4,minmax(0,1fr)); }
  .viewport-layout.layout-09:is(.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .play-products { grid-template-columns:1fr; grid-template-rows:none; grid-auto-rows:minmax(76px,1fr); align-content:start; overflow-y:auto; }

  .quiet-row__panel>.solution-media { left:14px; width:28px; }
  .viewport-layout.layout-10:is(.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .quiet-row { flex-basis:56px; }
  .viewport-layout.layout-10:is(.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .quiet-row.is-active { flex-basis:180px; }

  .bureau-files { max-width:100%; overflow:auto hidden; }
  .viewport-layout.layout-11:is(.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .bureau-tab { min-width:78px; min-height:48px; flex:0 0 78px; }
  .viewport-layout.layout-11.solution-count-0 .bureau-desk { grid-template-columns:1fr; grid-template-rows:minmax(143px,30%) minmax(0,1fr); }
  .viewport-layout.layout-11.solution-count-0 .bureau-folder { grid-row:2; }
}

@media (max-width:380px) {
  .atelier-piece .solution-media { width:34px; }
}

@media (max-height:560px) and (max-width:699px) {
  .viewport-layout.layout-10:is(.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .quiet-row { flex-basis:44px; }
  .viewport-layout.layout-10:is(.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .quiet-row.is-active { flex-basis:118px; }
}