/* Tangram : Live démo (bac à sable) */
body[data-page="demo"] main{max-width:1500px; padding-bottom:clamp(2.5rem,5vw,4rem);}
.demo-top{display:flex; align-items:end; justify-content:space-between; gap:.75rem 2.5rem; flex-wrap:wrap; padding:clamp(1.1rem,2vw,1.6rem) 0 .9rem;}
.demo-top h1{font-size:clamp(1.6rem,2.8vw,2.1rem); font-weight:800; letter-spacing:-.03em; line-height:1.05; margin:0 0 .35rem;}
.demo-top p.lede{margin:0; color:var(--fg-soft); max-width:none; font-size:.98rem; line-height:1.5;}
.demo-top .eyebrow{margin-bottom:.45rem;}
.sandbox-note{display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:700; color:#12784A; background:#E3F6EC; border-radius:999px; padding:.4rem .85rem; white-space:nowrap;}

/* missions */
.missions{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:0 0 .8rem; padding:.55rem .7rem; background:var(--bg-card); border:1px solid rgba(47,41,81,.08); border-radius:16px;}
.missions-title{font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--violet); margin-right:.3rem; display:inline-flex; align-items:center; gap:.5rem;}
.missions-title b{background:var(--fg); color:#fff; border-radius:999px; padding:.15rem .55rem; font-size:.72rem; letter-spacing:0;}
.mission{font-family:inherit; font-size:.77rem; font-weight:700; color:var(--fg); background:var(--bg); border:1.5px solid var(--line); border-radius:999px; padding:.38rem .8rem .38rem .5rem; cursor:pointer; display:inline-flex; align-items:center; gap:.45rem; transition:border-color .2s, background .2s, transform .2s var(--ease);}
.mission:hover{border-color:var(--violet); transform:translateY(-1px);}
.mission::before{content:""; width:15px; height:15px; border-radius:50%; border:2px solid var(--lavender); flex:none; transition:all .3s;}
.mission.done{background:#E3F6EC; border-color:#BFE8D2; color:#12784A;}
.mission.done::before{border-color:#2FB872; background:#2FB872 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;}
.missions.all{background:linear-gradient(120deg,#2F2951,#6E2383); border-color:transparent;}
.missions.all .missions-title{color:var(--yellow);}
.missions .bravo{display:none; color:#fff; font-weight:700; font-size:.92rem; align-items:center; gap:.9rem; flex-wrap:wrap;}
.missions.all .mission{display:none;}
.missions.all .bravo{display:inline-flex;}

/* plan de travail */
.demo-work{display:grid; grid-template-columns:minmax(340px,430px) minmax(0,1fr); gap:1rem; height:min(860px, calc(100dvh - 96px)); min-height:560px;}
.panel{display:flex; flex-direction:column; min-height:0; background:var(--bg-card); border:1px solid rgba(47,41,81,.09); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.panel-head{display:flex; align-items:center; gap:.6rem; padding:.8rem 1rem; background:var(--fg); color:#fff;}
.panel-head img{width:22px; height:22px;}
.panel-head b{font-size:.92rem; font-weight:800;}
.panel-head span{margin-left:auto; font-size:.7rem; font-weight:700; color:var(--lavender); letter-spacing:.06em; text-transform:uppercase;}
.tabs{display:flex; gap:.25rem; padding:.5rem .6rem 0; border-bottom:1px solid var(--line); background:#fff;}
.tabs button{font-family:inherit; font-size:.86rem; font-weight:700; color:var(--fg-soft); background:none; border:none; border-bottom:3px solid transparent; padding:.55rem .7rem .6rem; cursor:pointer;}
.tabs button:hover{color:var(--fg);}
.tabs button.on{color:var(--fg); border-bottom-color:var(--yellow);}
.panel-body{flex:1; min-height:0; overflow:auto; padding:1rem; scroll-behavior:smooth;}
.panel-foot{display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; border-top:1px solid var(--line); background:#fff; position:relative;}
.panel-foot .state{font-size:.78rem; font-weight:700; color:var(--fg-soft); display:inline-flex; align-items:center; gap:.45rem; min-width:0;}
.panel-foot .state::before{content:""; width:8px; height:8px; border-radius:50%; background:#2FB872; flex:none;}
.panel-foot .state.dirty::before{background:var(--yellow);}
.publish{margin-left:auto; position:relative; font-family:inherit; font-size:.92rem; font-weight:800; color:#fff; background:var(--fg); border:none; border-radius:999px; padding:.7rem 1.5rem; cursor:pointer; transition:background .2s, transform .2s var(--ease);}
.publish:hover{background:var(--violet); transform:translateY(-1px);}
.publish:disabled{opacity:.7; cursor:progress; transform:none;}
.publish.pulse{animation:pubpulse 1.2s 3;}
@keyframes pubpulse{0%{box-shadow:0 0 0 0 rgba(246,183,0,.9);} 100%{box-shadow:0 0 0 16px rgba(246,183,0,0);}}

.fld{margin-bottom:.9rem;}
.fld label, .lbl{display:block; font-size:.74rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-soft); margin-bottom:.35rem;}
.fld input[type=text], .fld textarea, .blk textarea, .blk input[type=text]{width:100%; font-family:inherit; font-size:.95rem; color:var(--fg); background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:.6rem .7rem; transition:border-color .2s, box-shadow .2s;}
.fld textarea, .blk textarea{resize:vertical; min-height:84px; line-height:1.5;}
.fld input:focus, .fld textarea:focus, .blk textarea:focus, .blk input:focus{outline:none; border-color:var(--violet); box-shadow:0 0 0 4px rgba(110,35,131,.12);}
.fld .hint{font-size:.76rem; color:var(--fg-soft); margin-top:.3rem; display:flex; justify-content:space-between; gap:.5rem;}
.fld .hint b.warn{color:#B4540A;}
.row2{display:grid; grid-template-columns:1fr auto; gap:.9rem; align-items:start;}
.swatches{display:flex; gap:.4rem; padding-top:.15rem;}
.swatches button{width:28px; height:28px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1.5px var(--line); cursor:pointer; padding:0; transition:transform .2s var(--ease);}
.swatches button:hover{transform:scale(1.12);}
.swatches button.on{box-shadow:0 0 0 2.5px var(--fg);}
.sep{display:flex; align-items:center; gap:.6rem; margin:1.2rem 0 .8rem; font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--violet);}
.sep::after{content:""; flex:1; height:1px; background:var(--line);}
.sep small{font-size:.72rem; font-weight:600; letter-spacing:0; text-transform:none; color:var(--fg-soft);}

/* blocs */
.blk{background:#fff; border:1.5px solid var(--line); border-radius:14px; margin-bottom:.6rem; transition:border-color .2s, box-shadow .2s, opacity .2s;}
.blk:hover, .blk:focus-within{border-color:var(--lavender);}
.blk.dragging{opacity:.35;}
.blk.over-top{box-shadow:0 -4px 0 -1px var(--yellow);}
.blk.over-bottom{box-shadow:0 4px 0 -1px var(--yellow);}
.blk.flash{animation:flash 1.4s;}
@keyframes flash{0%,60%{border-color:var(--yellow); box-shadow:0 0 0 5px rgba(246,183,0,.3);} 100%{box-shadow:0 0 0 5px rgba(246,183,0,0);}}
.blk-head{display:flex; align-items:center; gap:.5rem; padding:.45rem .5rem .45rem .35rem;}
.grip{width:26px; height:30px; border-radius:8px; cursor:grab; flex:none; background:radial-gradient(circle,#B9B4D2 1.6px,transparent 2px) center/7px 7px; background-clip:content-box; padding:6px 6px; touch-action:none;}
.grip:hover{background-color:var(--lavender-soft);}
.grip:active{cursor:grabbing;}
.blk-type{font-size:.76rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.45rem;}
.blk-type i{width:20px; height:20px; border-radius:6px; display:grid; place-items:center; font-style:normal; font-size:.7rem; color:#fff;}
.blk-tools{margin-left:auto; display:flex; gap:.15rem;}
.ib{font-family:inherit; width:30px; height:30px; border-radius:8px; border:none; background:none; color:var(--fg-soft); font-size:.95rem; font-weight:700; cursor:pointer; display:grid; place-items:center;}
.ib:hover{background:var(--lavender-soft); color:var(--fg);}
.ib:disabled{opacity:.3; cursor:default; background:none;}
.ib.del:hover{background:#FBE6E3; color:#B42318;}
.blk-body{padding:0 .6rem .6rem;}
.thumbs{display:flex; gap:.5rem; flex-wrap:wrap; align-items:flex-start;}
.th{position:relative; width:104px; aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:var(--bg-dim); border:none; padding:0; cursor:pointer; flex:none;}
.th.big{width:136px;}
.th img{width:100%; height:100%; object-fit:cover; display:block;}
.th::after{content:"Retoucher"; position:absolute; inset:auto 0 0 0; padding:.9rem .3rem .3rem; font-size:.68rem; font-weight:800; color:#fff; text-align:center; background:linear-gradient(transparent,rgba(47,41,81,.85)); opacity:0; transition:opacity .2s;}
.th:hover::after, .th:focus-visible::after{opacity:1;}
.th.nudge{box-shadow:0 0 0 3px var(--yellow);}
.th.nudge::after{opacity:1;}
.img-side{flex:1; min-width:120px; display:flex; flex-direction:column; gap:.4rem;}
.mini{font-family:inherit; font-size:.8rem; font-weight:700; color:var(--fg); background:var(--bg); border:1.5px solid var(--line); border-radius:999px; padding:.4rem .8rem; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; transition:border-color .2s, background .2s;}
.mini:hover{border-color:var(--violet);}
.mini.pri{background:var(--fg); border-color:var(--fg); color:#fff;}
.mini.pri:hover{background:var(--violet); border-color:var(--violet);}
.mini.glow{animation:pubpulse 1.2s 3;}
.receipt{margin-top:.5rem; font-size:.78rem; font-weight:600; color:#12784A; background:#E3F6EC; border-radius:10px; padding:.5rem .65rem; line-height:1.45;}
.receipt b{font-weight:800;}
.add-row{display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.8rem;}
.privacy{font-size:.76rem; color:var(--fg-soft); margin:.6rem 0 0; line-height:1.5;}

/* référencement */
.serp{background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:.9rem 1rem; margin-bottom:.9rem;}
.serp .u{font-size:.76rem; color:#4D5156; display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem; min-width:0;}
.serp .u i{width:24px; height:24px; border-radius:50%; background:var(--pvac,#C4572E); flex:none;}
.serp .u span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.serp .t{font-size:1.1rem; line-height:1.3; color:#1A0DAB; margin-bottom:.2rem; font-family:Arial,sans-serif; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;}
.serp .d{font-size:.84rem; line-height:1.5; color:#4D5156; font-family:Arial,sans-serif; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.share{border:1.5px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; margin-bottom:.9rem; max-width:320px;}
.share .im{aspect-ratio:1.91/1; background:var(--bg-dim); overflow:hidden;}
.share .im img{width:100%; height:100%; object-fit:cover; display:block;}
.share .tx{padding:.6rem .75rem .7rem;}
.share .tx small{display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-soft);}
.share .tx b{display:block; font-size:.9rem; line-height:1.3; margin-top:.15rem;}
.auto-list{list-style:none; margin:.4rem 0 0; padding:0; display:grid; gap:.35rem;}
.auto-list li{font-size:.84rem; color:var(--fg-soft); display:flex; gap:.5rem; align-items:baseline;}
.auto-list li::before{content:"✓"; color:#2FB872; font-weight:800;}

/* historique */
.hist{list-style:none; margin:0; padding:0;}
.hist li{position:relative; padding:0 0 1rem 1.5rem;}
.hist li::before{content:""; position:absolute; left:5px; top:.5rem; bottom:-.5rem; width:2px; background:var(--line);}
.hist li:last-child::before{display:none;}
.hist li::after{content:""; position:absolute; left:0; top:.3rem; width:12px; height:12px; border-radius:50%; background:#fff; border:2.5px solid var(--lavender);}
.hist li.live::after{background:#2FB872; border-color:#2FB872;}
.hist .when{font-size:.9rem; font-weight:800; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;}
.hist .badge{font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#12784A; background:#E3F6EC; border-radius:999px; padding:.15rem .5rem;}
.hist .what{font-size:.84rem; color:var(--fg-soft); margin:.2rem 0 .45rem; line-height:1.5;}
.empty{font-size:.88rem; color:var(--fg-soft); line-height:1.6; background:var(--bg); border-radius:12px; padding:.8rem .9rem; margin:0 0 1rem;}

/* scène : aperçu */
.stage{display:flex; flex-direction:column; min-width:0; min-height:0; background:linear-gradient(160deg,#E9E6F3,#DEDAEC); border-radius:var(--radius); padding:.75rem; position:relative; overflow:hidden;}
.stage-bar{display:flex; align-items:center; gap:.6rem; margin-bottom:.7rem; flex-wrap:wrap;}
.seg{display:inline-flex; background:rgba(255,255,255,.7); border-radius:999px; padding:3px;}
.seg button{font-family:inherit; font-size:.8rem; font-weight:700; color:var(--fg-soft); border:none; background:none; border-radius:999px; padding:.4rem .85rem; cursor:pointer;}
.seg button.on{background:var(--fg); color:#fff;}
.url{flex:1; min-width:140px; display:flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.85); border-radius:999px; padding:.42rem .9rem; font-size:.8rem; font-weight:600; color:var(--fg-soft); overflow:hidden; white-space:nowrap;}
.url i{width:8px; height:8px; border-radius:50%; background:#2FB872; flex:none;}
.url.dirty i{background:var(--yellow);}
.url span{overflow:hidden; text-overflow:ellipsis;}
.url em{font-style:normal; margin-left:auto; font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#12784A; flex:none;}
.url.dirty em{color:#8A6400;}
.frame-wrap{flex:1; min-height:0; display:flex; justify-content:center;}
.frame{width:100%; height:100%; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(47,41,81,.55); transition:width .6s cubic-bezier(.65,0,.2,1), border-radius .6s, border-width .6s; border:0 solid var(--fg);}
.frame.mobile{width:390px; max-width:100%; border-radius:38px; border-width:9px;}
.frame-scroll{height:100%; overflow:auto; container-type:inline-size; scroll-behavior:smooth;}
.pub-steps{position:absolute; left:50%; top:4.2rem; transform:translate(-50%,-12px); opacity:0; pointer-events:none; z-index:5; background:var(--fg); color:#fff; font-size:.86rem; font-weight:700; border-radius:999px; padding:.6rem 1.1rem; display:flex; align-items:center; gap:.6rem; box-shadow:0 18px 30px -16px rgba(47,41,81,.8); transition:opacity .25s, transform .25s var(--ease); white-space:nowrap; max-width:92%;}
.pub-steps.on{opacity:1; transform:translate(-50%,0);}
.pub-steps i{width:14px; height:14px; border-radius:50%; border:2.5px solid rgba(255,255,255,.3); border-top-color:var(--yellow); animation:spin .7s linear infinite; flex:none;}
.pub-steps.ok{background:#12784A;}
.pub-steps.ok i{animation:none; border-color:#fff; background:#fff;}
@keyframes spin{to{transform:rotate(360deg);}}
.confetti{position:fixed; width:14px; height:14px; z-index:200; pointer-events:none; clip-path:polygon(0 0,100% 50%,0 100%); animation:conf 1.1s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes conf{to{transform:translate(var(--x),var(--y)) rotate(var(--r)); opacity:0;}}

/* le site de démonstration (identité volontairement différente de Tangram) */
.pv{--ac:#C4572E; font-family:'Manrope',system-ui,sans-serif; color:#22201C; background:#FBF8F2; min-height:100%; display:flex; flex-direction:column;}
.pv-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 6cqw; border-bottom:1px solid #EAE3D6;}
.pv-head b{font-family:Georgia,'Times New Roman',serif; font-size:1.15rem; font-weight:700; letter-spacing:-.01em;}
.pv-head nav{display:flex; gap:1.4rem; font-size:.84rem; font-weight:600; color:#6B655B;}
.pv-head nav span:first-child{color:var(--ac);}
.pv-burger{display:none; width:22px; height:14px; border-top:2px solid #22201C; border-bottom:2px solid #22201C; position:relative;}
.pv-burger::after{content:""; position:absolute; left:0; right:0; top:4px; border-top:2px solid #22201C;}
.pv-hero{padding:clamp(1.75rem,7cqw,4.5rem) 6cqw clamp(1.25rem,4cqw,2.5rem);}
.pv-tag{display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ac); margin-bottom:.9rem; transition:color .4s;}
.pv-hero h1{font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.9rem,7.2cqw,4.2rem); font-weight:700; line-height:1.03; letter-spacing:-.025em; margin:0 0 .8rem; overflow-wrap:anywhere;}
.pv-hero p{font-size:clamp(1rem,2.2cqw,1.25rem); color:#6B655B; margin:0; max-width:40ch; line-height:1.5;}
.pv-blocks{padding:0 6cqw 3rem; display:flex; flex-direction:column; gap:clamp(1.25rem,3.5cqw,2.25rem); flex:1;}
.pv-b{border-radius:10px; outline:3px solid transparent; outline-offset:8px; transition:outline-color .3s;}
.pv-b.hl{outline-color:var(--yellow);}
.pv-text{max-width:62ch; font-size:1.02rem; line-height:1.75; margin:0; white-space:pre-line;}
.pv-b:first-child .pv-text::first-letter{font-family:Georgia,serif; font-size:3.1em; line-height:.8; float:left; padding:.08em .1em 0 0; color:var(--ac);}
.pv-img{margin:0;}
.pv-fr{overflow:hidden; border-radius:6px; background:#EAE3D6;}
.pv-fr img{display:block; width:100%; height:auto; transition:filter .25s, transform .35s;}
.pv-fr[data-r] img{height:100%; object-fit:cover;}
.pv-img figcaption{font-size:.8rem; color:#6B655B; margin-top:.5rem; font-style:italic;}
.pv-gal{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem;}
.pv-gal .pv-fr{aspect-ratio:1;}
.pv-gal .pv-fr img{height:100%; object-fit:cover;}
.pv-empty{font-size:.9rem; color:#9A9387; border:2px dashed #DDD4C2; border-radius:10px; padding:2rem; text-align:center;}
.pv-foot{padding:1.2rem 6cqw; border-top:1px solid #EAE3D6; font-size:.78rem; color:#6B655B; display:flex; justify-content:space-between; gap:1rem;}
.pv-foot i{font-style:normal; color:var(--ac);}
@container (max-width:560px){
  .pv-head nav{display:none;}
  .pv-burger{display:block;}
  .pv-gal{grid-template-columns:repeat(2,1fr);}
  .pv-head, .pv-hero, .pv-blocks, .pv-foot{padding-left:1.25rem; padding-right:1.25rem;}
  .pv-foot{flex-direction:column; gap:.3rem;}
}

/* éditeur de retouche */
.modal{position:fixed; inset:0; z-index:100; background:rgba(31,27,54,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:1rem;}
.modal.on{display:flex;}
.editor{background:var(--bg-card); border-radius:22px; width:min(980px,100%); max-height:calc(100dvh - 2rem); overflow:auto; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.9fr); box-shadow:0 40px 80px -30px rgba(0,0,0,.6);}
.ed-view{background:#1F1B36; padding:1.25rem; display:grid; place-items:center; min-height:340px; position:relative;}
.ed-fr{overflow:hidden; border-radius:8px; max-width:100%; width:100%; background:#000; box-shadow:0 0 0 1px rgba(255,255,255,.15);}
.ed-fr img{display:block; width:100%; height:auto;}
.ed-fr[data-r] img{height:100%; object-fit:cover;}
.ed-hold{position:absolute; left:1.25rem; bottom:1.25rem; font-family:inherit; font-size:.76rem; font-weight:700; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:.4rem .8rem; cursor:pointer; user-select:none; touch-action:none;}
.ed-hold:active{background:var(--yellow); color:var(--fg); border-color:var(--yellow);}
.ed-ctl{padding:1.25rem 1.25rem 1rem; display:flex; flex-direction:column; gap:.2rem;}
.ed-ctl h2{font-size:1.2rem; font-weight:800; letter-spacing:-.02em; margin:0 0 .2rem;}
.ed-ctl > p{font-size:.84rem; color:var(--fg-soft); margin:0 0 .8rem; line-height:1.5;}
.ratios{display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:.9rem;}
.ratios button{font-family:inherit; font-size:.78rem; font-weight:700; color:var(--fg); background:var(--bg); border:1.5px solid var(--line); border-radius:999px; padding:.35rem .7rem; cursor:pointer;}
.ratios button.on{background:var(--fg); border-color:var(--fg); color:#fff;}
.sl{margin-bottom:.7rem;}
.sl label{display:flex; justify-content:space-between; font-size:.76rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-soft); margin-bottom:.15rem;}
.sl label output{color:var(--fg); letter-spacing:0;}
.sl input[type=range]{width:100%; accent-color:var(--violet); margin:0; height:24px;}
.ed-actions{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:auto; padding-top:.8rem; border-top:1px solid var(--line);}
.ed-actions .mini{padding:.55rem 1rem; font-size:.86rem;}
.ed-actions .pri{margin-left:auto;}

.toast{position:fixed; left:50%; bottom:1.5rem; transform:translate(-50%,20px); opacity:0; z-index:150; background:var(--fg); color:#fff; font-size:.9rem; font-weight:600; border-radius:14px; padding:.8rem 1.2rem; max-width:min(520px,92vw); box-shadow:0 20px 40px -18px rgba(0,0,0,.6); transition:opacity .25s, transform .3s var(--ease); pointer-events:none; line-height:1.45;}
.toast.on{opacity:1; transform:translate(-50%,0);}
.toast b{color:var(--yellow);}

.view-switch{display:none;}
@media (max-width:920px){
  .demo-work{grid-template-columns:1fr; height:auto; min-height:0;}
  .panel{max-height:none;}
  .panel-body{overflow:visible;}
  .stage{height:78dvh;}
  .demo-work[data-view="edit"] .stage{display:none;}
  .demo-work[data-view="see"] .panel{display:none;}
  .view-switch{display:flex; position:sticky; bottom:.75rem; z-index:40; margin:.9rem auto 0; width:max-content; background:var(--fg); border-radius:999px; padding:4px; box-shadow:0 16px 30px -14px rgba(47,41,81,.8);}
  .view-switch button{font-family:inherit; font-size:.9rem; font-weight:800; color:#B9B4D2; background:none; border:none; border-radius:999px; padding:.6rem 1.2rem; cursor:pointer;}
  .view-switch button.on{background:var(--yellow); color:var(--fg);}
  .panel-foot{position:sticky; bottom:0;}
  .editor{grid-template-columns:1fr;}
  .ed-view{min-height:220px;}
}
@media (prefers-reduced-motion:reduce){
  .frame, .pv-fr img{transition:none;}
  .confetti{display:none;}
}
@media (max-width:920px){
  .missions{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
  .missions::-webkit-scrollbar{display:none;}
  .missions > *{flex:none;}
  .missions.all{flex-wrap:wrap;}
  .missions .bravo{flex:1 1 auto;}
}