:root{
  --bg:#efe9df; --accent:#56664b; --ink:#3d3b33; --muted:#8a8576;
  --bar-h:56px; --foot-h:58px; --pw:400px;
  --pad-y:max(68px,10vh); --pad-x:clamp(70px,7vw,120px);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Heebo",-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
#app{position:fixed;inset:0;display:flex;flex-direction:column;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(60,50,30,.10) 100%),
    var(--bg);
  opacity:0;transition:opacity .6s ease}
body.ready #app{opacity:1}

/* ---------- tools (inside the bottom bar) ---------- */
#title{font-family:var(--serif);font-size:18px;font-weight:500;letter-spacing:.02em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85;min-width:0}
.tools{display:flex;gap:2px;flex:0 0 auto}
.ic{width:40px;height:40px;border:0;background:transparent;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink);opacity:.7;transition:background .2s,opacity .2s}
.ic:hover{opacity:1;background:rgba(80,70,50,.08)}
.ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

#btn-sound .x{display:none}
#btn-sound.muted .x{display:inline}#btn-sound.muted .w{display:none}

/* ---------- stage ---------- */
#stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;padding:var(--pad-y) var(--pad-x)}
#zoomer{position:absolute;inset:var(--pad-y) var(--pad-x);transform-origin:50% 50%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
body.zoomed #zoomer{transition:none}
#book-holder{position:absolute;inset:0}
#book{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important}
#zoom-shield{position:absolute;inset:0;display:none;cursor:grab;z-index:5;touch-action:none;-webkit-user-select:none;user-select:none}
#zoom-shield:active{cursor:grabbing}

.nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  background:transparent;display:grid;place-items:center;color:var(--ink);opacity:.55;transition:opacity .25s,background .25s,box-shadow .25s;z-index:6}
.nav:hover{opacity:1;background:rgba(255,255,255,.7);box-shadow:0 2px 14px rgba(60,50,30,.12)}
.nav svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
#nav-prev{left:20px} #nav-next{right:20px}
.nav.off{opacity:0;pointer-events:none}

/* ---------- pages ---------- */
.page{background:#fbf8f2;overflow:hidden}
.page-inner{position:absolute;inset:0;overflow:hidden}
.page-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.page-els{position:absolute;inset:0}
.page-shade{position:absolute;inset:0;pointer-events:none}
.side-l .page-shade{background:linear-gradient(to left,rgba(0,0,0,.16) 0%,rgba(0,0,0,.05) 3%,rgba(0,0,0,0) 9%)}
.side-r .page-shade{background:linear-gradient(to right,rgba(0,0,0,.14) 0%,rgba(0,0,0,.04) 3%,rgba(0,0,0,0) 8%)}
body.portrait .page-shade{background:none}
#book-shadow{position:absolute;pointer-events:none;border-radius:2px;box-shadow:0 22px 40px -8px rgba(60,45,20,.28),0 4px 10px rgba(60,45,20,.12);transition:left .5s ease,width .5s ease;background:#fbf8f2}

/* ---------- interactive elements ---------- */
.fe{position:absolute;overflow:hidden}
.fe img,.fe video,.fe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.fe-link-a{position:absolute;inset:0;display:block;cursor:pointer;border-radius:inherit;transition:background .25s, box-shadow .25s}
.fe-link-a:hover{background:rgba(255,240,190,.22);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.fe-link-visible .fe-link-a{background:rgba(255,240,190,.18);box-shadow:inset 0 0 0 1px rgba(120,100,60,.35)}
.fe-clickable{cursor:pointer}
.fe-text{display:flex;align-items:center;line-height:1.3;white-space:pre-wrap;overflow:visible;box-sizing:border-box}
.fe-text.fe-top{align-items:flex-start}
.fe-text .tx{width:100%;outline:none}
.fe-video,.fe-shape{container-type:size}
.fe-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(34px,24cqmin,76px);height:clamp(34px,24cqmin,76px);border-radius:50%;border:0;padding:0;cursor:pointer;z-index:2;
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px rgba(255,255,255,.55),0 0 0 7px rgba(255,255,255,.18),0 6px 22px rgba(0,0,0,.28);display:grid;place-items:center;transition:opacity .35s, transform .25s}
.fe-play svg{width:42%;height:42%;fill:var(--ink);margin-left:8%}
.fe-play:hover,.fe-clickplay:hover .fe-play{transform:translate(-50%,-50%) scale(1.07)}
.fe-play.hide{opacity:0}
.fe-clickplay.playing:hover .fe-play.hide{opacity:.55}
.fe-play.static{pointer-events:none}
.fe-clickplay{cursor:pointer}
.fe-embed-ph{position:absolute;inset:0;display:grid;place-items:center;background:#222;color:#fff;font-size:14px}

/* ---------- bottom bar ---------- */
/* one thin bar at the bottom – floats over the stage and hides itself when the reader is idle */
#bottombar{position:absolute;left:0;right:0;bottom:0;z-index:20;height:var(--foot-h);display:flex;flex-direction:column;
  background:rgba(251,248,242,.78);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 -1px 0 rgba(80,70,50,.08);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
body.bars-hidden #bottombar{opacity:0;transform:translateY(10px);pointer-events:none}
body.bars-hidden #app{cursor:none}
.bb-row{flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 14px 0 24px;min-height:0}
.bb-info{display:flex;align-items:baseline;gap:14px;min-width:0}
#pg-label{font-size:13px;letter-spacing:.06em;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
#pg-slider{-webkit-appearance:none;appearance:none;display:block;width:100%;height:3px;margin:0;border-radius:0;cursor:pointer;outline:none;flex:0 0 auto;
  background:linear-gradient(to right,var(--accent) 0 var(--fill,0%),rgba(80,70,50,.18) var(--fill,0%) 100%)}
#pg-slider[dir=rtl]{background:linear-gradient(to left,var(--accent) 0 var(--fill,0%),rgba(80,70,50,.18) var(--fill,0%) 100%)}
#pg-slider::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;transform:scale(.6);transition:transform .2s;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.2)}
#pg-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--accent)}
#bottombar:hover #pg-slider::-webkit-slider-thumb{transform:scale(1)}
#pg-slider:hover{height:5px}

/* ---------- thumbnails ---------- */
#thumbs{position:fixed;inset:0;z-index:50;background:rgba(40,34,24,.35);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
#thumbs.open{opacity:1;pointer-events:auto}
.thumbs-panel{position:absolute;left:0;right:0;bottom:0;max-height:62vh;background:var(--bg);border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.15);display:flex;flex-direction:column;transform:translateY(30px);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
#thumbs.open .thumbs-panel{transform:none}
.thumbs-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px 4px 26px;font-family:var(--serif);font-size:20px}
#thumbs-grid{overflow:auto;padding:10px 24px 28px;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:18px 14px}
.thumb{position:relative;border:0;padding:0;background:#fff;cursor:pointer;border-radius:3px;overflow:hidden;box-shadow:0 2px 8px rgba(60,45,20,.15);transition:transform .2s, box-shadow .2s}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb span{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-size:11px;background:rgba(255,255,255,.85);border-radius:8px;padding:0 7px}
.thumb:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(60,45,20,.22)}
.thumb.cur{outline:2px solid var(--accent);outline-offset:3px}

#toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(10px);background:rgba(40,36,28,.9);color:#fff;padding:9px 18px;border-radius:20px;font-size:14px;opacity:0;pointer-events:none;transition:.3s;z-index:200}
#toast.show{opacity:1;transform:translateX(-50%)}

@media (max-width:700px){
  :root{--bar-h:48px;--foot-h:52px}
  #stage{padding:12px 10px calc(var(--foot-h) + 8px)}
  #zoomer{inset:12px 10px calc(var(--foot-h) + 8px)}
  .nav{width:38px;height:38px;background:rgba(255,255,255,.4)}
  .nav svg{width:22px;height:22px;stroke-width:1.5}
  #nav-prev{left:4px}#nav-next{right:4px}
  #title{display:none}
  .bb-row{padding:0 4px 0 14px;gap:6px}
  .ic{width:36px;height:36px}
}
@media print{#bottombar,.nav{display:none}}

/* =====================================================================
   EDITOR
   ===================================================================== */
#editor{position:fixed;inset:0;z-index:100;display:none;background:#f3f1ec;font-family:var(--sans);direction:rtl;color:#2d2b26}
body.editing #editor{display:grid;grid-template-rows:64px 1fr;grid-template-columns:200px 1fr 290px;grid-template-areas:"bar bar bar" "pages canvas props"}
#ed-bar{grid-area:bar;display:flex;align-items:center;gap:6px;padding:0 12px;background:#fff;border-bottom:1px solid #e4e0d6}
#ed-bar .sep{width:1px;height:26px;background:#e4e0d6;margin:0 6px}
#ed-bar .grow{flex:1}
.eb{height:36px;padding:0 13px;border-radius:9px;border:1px solid transparent;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-size:14px;white-space:nowrap}
.eb:hover{background:#f1eee6}
.eb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.eb.primary{background:var(--accent);color:#fff}
.eb.primary:hover{filter:brightness(1.08)}
.eb.outline{border-color:#d9d4c7}
.eb[disabled]{opacity:.4;pointer-events:none}
#ed-status{font-size:12px;color:#8a8576;margin-inline:8px}
#ed-status.dirty{color:#b0702a}

#ed-pages{grid-area:pages;overflow:auto;background:#ebe8e0;padding:12px 14px 30px;border-left:1px solid #e0dbcf}
.ep{position:relative;margin:0 auto 14px;cursor:pointer;border-radius:3px;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.12);outline:2px solid transparent;outline-offset:3px}
.ep img{display:block;width:100%;height:100%;object-fit:cover;border-radius:3px;pointer-events:none}
.ep.sel{outline-color:var(--accent)}
.ep .num{position:absolute;bottom:4px;right:4px;font-size:11px;background:rgba(255,255,255,.9);border-radius:8px;padding:0 6px}
.ep .badge{position:absolute;top:4px;left:4px;font-size:10px;background:var(--accent);color:#fff;border-radius:8px;padding:0 6px}
.ep.drag-over{box-shadow:0 -4px 0 var(--accent)}
.ep.dragging{opacity:.4}

#ed-canvas{grid-area:canvas;position:relative;overflow:auto;display:flex;padding:30px;direction:ltr;background:var(--bg);transition:background .15s}
#ed-spread{position:relative;display:flex;flex-shrink:0;margin:auto;box-shadow:0 10px 40px rgba(0,0,0,.15)}
.ed-page{position:relative;background:#fff;overflow:visible}
#ed-spread{overflow:clip;overflow-clip-margin:10px}
.ed-page img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.ed-page .page-els{position:absolute;inset:0}
.ed-page.active{box-shadow:0 0 0 2px var(--accent)}
.ed-page.inactive>img.bg{opacity:.75}
.ed-page.inactive .fe{outline-color:rgba(60,110,200,.3)}
.ed-page .fe{outline:1.5px dashed rgba(60,110,200,.55);cursor:move}
.ed-page .fe-link{background:rgba(70,130,230,.16)}
.ed-page .fe.sel{outline:2px solid #2f7bf6}
.ed-page .fe .tag{position:absolute;top:2px;left:2px;font-size:10px;background:#2f7bf6;color:#fff;border-radius:3px;padding:0 4px;pointer-events:none;font-family:var(--sans)}
.hdl{position:absolute;width:12px;height:12px;background:#fff;border:2px solid #2f7bf6;border-radius:3px;z-index:3}
.hdl.nw{left:-6px;top:-6px;cursor:nwse-resize}.hdl.ne{right:-6px;top:-6px;cursor:nesw-resize}
.hdl.sw{left:-6px;bottom:-6px;cursor:nesw-resize}.hdl.se{right:-6px;bottom:-6px;cursor:nwse-resize}
.ed-page .fe.sel{overflow:visible}

#ed-props{grid-area:props;overflow:auto;background:#fff;border-right:1px solid #e4e0d6;padding:16px 18px 40px}
#ed-props h3{font-size:13px;font-weight:600;letter-spacing:.04em;color:#8a8576;margin:20px 0 10px;text-transform:uppercase}
#ed-props h3:first-child{margin-top:0}
.fld{display:flex;flex-direction:column;gap:4px;margin-bottom:11px;font-size:13px}
.fld input[type=text],.fld input[type=url],.fld input[type=number],.fld select,.fld textarea{width:100%;height:34px;border:1px solid #ddd8cc;border-radius:7px;padding:0 9px;font:inherit;font-size:13px;background:#fcfbf8}
.fld textarea{height:70px;padding:7px 9px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid color-mix(in srgb,var(--accent) 40%,transparent);border-color:var(--accent)}
.row{display:flex;gap:8px}.row>.fld{flex:1}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;margin:6px 0}
.hint{font-size:12px;color:#8a8576;line-height:1.5}
.el-list{display:flex;flex-direction:column;gap:4px}
.el-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;background:#f6f4ef;cursor:pointer;font-size:13px}
.el-item.sel{background:color-mix(in srgb,var(--accent) 18%,#fff)}
.btn-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.danger{color:#b3402f}

/* modal */
.ed-modal{position:fixed;inset:0;z-index:300;background:rgba(30,26,20,.45);display:grid;place-items:center;direction:rtl;font-family:var(--sans)}
.ed-modal .box{background:#fff;border-radius:16px;padding:24px 26px;width:min(460px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.ed-modal h2{margin:0 0 12px;font-size:19px;font-weight:600}
.ed-modal p{font-size:14px;line-height:1.6;color:#555;margin:0 0 14px}
.ed-modal .opts{display:flex;flex-direction:column;gap:8px}
.ed-modal .opt{text-align:right;border:1px solid #e0dbcf;border-radius:10px;padding:11px 14px;background:#fcfbf8;cursor:pointer;font-size:14px}
.ed-modal .opt b{display:block;margin-bottom:2px}
.ed-modal .opt span{font-size:12.5px;color:#777}
.ed-modal .opt:hover{border-color:var(--accent);background:#fff}
.progress{height:6px;background:#eee;border-radius:3px;overflow:hidden;margin-top:14px}
.progress i{display:block;height:100%;background:var(--accent);width:0;transition:width .2s}

/* =====================================================================
   STUDIO (home screen when there is no book yet)
   ===================================================================== */
#studio{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:24px;overflow:auto;
  background:radial-gradient(120% 90% at 50% 40%,#fbf8f2 0%,var(--bg) 60%,#e6dfd2 100%)}
.st-inner{width:min(640px,100%);text-align:center;font-family:var(--sans);color:var(--ink)}
.st-brand{font-family:var(--serif);font-style:italic;font-size:20px;letter-spacing:.06em;color:var(--accent);opacity:.9}
#studio h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5vw,52px);margin:6px 0 4px;letter-spacing:.01em}
.st-sub{margin:0 0 30px;color:var(--muted);font-size:16px;font-weight:300}
#st-drop{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;padding:48px 24px;border-radius:22px;
  border:1.5px dashed rgba(86,102,75,.45);background:rgba(255,255,255,.55);box-shadow:0 18px 50px -20px rgba(60,45,20,.25);
  transition:transform .25s,background .25s,border-color .25s}
#st-drop:hover,#st-drop.over{background:rgba(255,255,255,.9);border-color:var(--accent);transform:translateY(-2px)}
#st-drop.over{transform:scale(1.02)}
#st-drop svg{width:58px;height:58px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
#st-drop b{font-size:20px;font-weight:500}
#st-drop span{font-size:14px;color:var(--muted)}
.st-actions{margin:18px 0 34px}
.st-link{border:0;background:none;color:var(--accent);font-size:15px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.st-steps{list-style:none;padding:0;margin:0;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.st-steps li{display:flex;align-items:center;gap:8px}
.st-steps i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:12px}
body.studio #bottombar,body.studio .nav{visibility:hidden}

#st-banner{position:fixed;left:50%;top:6px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:6px;padding:7px 8px 7px 8px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:16px;box-shadow:0 10px 30px rgba(60,45,20,.18);font-family:var(--sans);white-space:nowrap}
#st-banner .msg{font-size:13px;color:var(--muted);padding:0 10px}
body.editing #st-banner{display:none}
#st-banner{transition:opacity .45s ease}
body.bars-hidden #st-banner{opacity:0;pointer-events:none}
@media (max-width:700px){#st-banner{top:auto;bottom:58px;max-width:96vw;overflow-x:auto}#st-banner .msg{display:none}}

/* YouTube cover (used when the book is opened from disk, and in the editor) */
.fe-yt{background:#111;cursor:pointer}
.fe-yt img{object-fit:cover;opacity:.92}
.fe-play-yt{background:rgba(255,255,255,.88)}
.fe-yt-label{position:absolute;left:8px;bottom:6px;font:500 11px var(--sans);color:#fff;background:rgba(0,0,0,.55);padding:1px 7px;border-radius:6px}
#ed-canvas.drop-over{background:color-mix(in srgb,var(--accent) 10%,#f3f1ec);outline:2px dashed var(--accent);outline-offset:-12px}

/* drag & drop hints in the editor */
#ed-canvas.drop-over::after{content:"שחררי כאן כדי להוסיף לעמוד";position:absolute;top:10px;left:50%;transform:translateX(-50%);direction:rtl;
  background:var(--accent);color:#fff;font:500 14px var(--sans);padding:7px 16px;border-radius:20px;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.ed-page .fe.drop-target{outline:3px solid #e2a23b !important;outline-offset:-3px}
.ed-page .fe.drop-target::after{content:"החלפת הקובץ";position:absolute;inset:auto 0 0 0;background:rgba(226,162,59,.92);color:#fff;font:500 12px var(--sans);text-align:center;padding:3px;direction:rtl}

/* ---------- gallery ---------- */
.fe-gallery{background:transparent}
.gx-track{position:absolute;inset:0;overflow:hidden}
.gx-track img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s ease,transform .6s cubic-bezier(.3,.7,.2,1)}
.gx-track img.on{opacity:1;z-index:1}
.gx-slide .gx-track{display:flex;overflow:visible;transition:transform .55s cubic-bezier(.3,.7,.2,1)}
.gx-slide .gx-track img{position:relative;flex:0 0 100%;opacity:1;transition:none}
.gx-slide.gx-rtl .gx-track{flex-direction:row-reverse}
.gx-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:clamp(28px,calc(var(--pw) * .075),46px);height:clamp(28px,calc(var(--pw) * .075),46px);
  border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:rgba(255,255,255,.78);box-shadow:0 2px 10px rgba(0,0,0,.18);
  opacity:.85;transition:opacity .2s,background .2s,transform .2s}
.gx-arrow:hover{opacity:1;background:#fff;transform:translateY(-50%) scale(1.06)}
.gx-arrow svg{width:55%;height:55%;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gx-l{left:3%}.gx-r{right:3%}
.gx-dots{position:absolute;left:0;right:0;bottom:4%;z-index:3;display:flex;justify-content:center;gap:7px}
.gx-dots i{width:7px;height:7px;border-radius:50%;background:var(--dot-dim,rgba(255,255,255,.55));box-shadow:var(--dot-sh,0 0 3px rgba(0,0,0,.35));cursor:pointer;transition:background .2s,transform .2s}
.gx-dots i.on{background:var(--dot,#fff);transform:scale(1.25)}
.gx-count{position:absolute;right:6px;bottom:6px;z-index:3;font:500 11px var(--sans);color:#fff;background:rgba(0,0,0,.55);padding:2px 8px;border-radius:8px;direction:rtl}
.gx-empty{position:absolute;inset:0;display:grid;place-items:center;font:14px var(--sans);color:#8a8576;border:1.5px dashed #c9c2b2;direction:rtl;text-align:center;padding:10px}
.g-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.g-thumbs div{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;background:#eee;cursor:grab}
.g-thumbs img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.g-thumbs b{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:13px;line-height:20px;text-align:center;cursor:pointer}
.g-thumbs span{position:absolute;bottom:3px;right:4px;font-size:10px;color:#fff;background:rgba(0,0,0,.5);border-radius:6px;padding:0 5px}
.g-thumbs div.drag-over{outline:2px solid var(--accent)}
.ed-page .fe-gallery.drop-target::after{content:"הוספה לגלריה"}
.ed-page .fe-gallery .gx-track img{transition:none}

#st-continue{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:0 0 16px;padding:16px 20px;border-radius:16px;border:0;cursor:pointer;
  background:var(--accent);color:#fff;font-family:var(--sans);font-size:16px;box-shadow:0 10px 30px -12px rgba(60,45,20,.45);transition:transform .2s,filter .2s}
#st-continue:hover{transform:translateY(-2px);filter:brightness(1.08)}
#st-continue b{font-weight:600}
#st-continue small{opacity:.75;font-size:12.5px}

/* PDF text picking */
.tp-layer{position:absolute;inset:0;z-index:100000;pointer-events:none}
.tp-box{position:absolute;pointer-events:auto;border:1.5px dashed #e2a23b;background:rgba(226,162,59,.10);cursor:pointer;border-radius:2px;transition:background .15s}
.tp-box:hover{background:rgba(226,162,59,.28);border-style:solid}
.ed-page .fe-text.editing-text{outline:2px solid #e2a23b !important;cursor:text}
.ed-page .fe-text.editing-text .tx{cursor:text;user-select:text;-webkit-user-select:text}

/* editor zoom */
#ed-zoom{grid-area:canvas;align-self:end;justify-self:center;margin-bottom:14px;z-index:5;display:flex;align-items:center;gap:2px;padding:4px;
  background:rgba(255,255,255,.94);border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.14);font-family:var(--sans)}
#ed-zoom button{border:0;background:none;cursor:pointer;height:32px;min-width:34px;border-radius:8px;font-size:18px;color:#3d3b33}
#ed-zoom button:hover{background:#f1eee6}
#ed-zoom .zv{font-size:13px;min-width:56px;font-variant-numeric:tabular-nums}
#ed-canvas.pan,#ed-canvas.pan *{cursor:grab !important}
#ed-canvas.panning,#ed-canvas.panning *{cursor:grabbing !important}

/* shapes */
.fe-shape{overflow:visible}
.fe-shape svg{position:absolute;inset:0}
.shape-pick{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:6px}
.shape-pick button{aspect-ratio:1;min-width:0;display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid #e0dbcf;border-radius:10px;background:#fcfbf8;cursor:pointer;padding:10px;display:grid;place-items:center}
.shape-pick button:hover{border-color:var(--accent);background:#fff}
.shape-pick svg{width:100%;height:100%}
.shape-pick span{font-size:11px;color:#666;margin-top:2px}

/* clean view – only the book */
body.clean #bottombar,body.clean #st-banner{display:none !important}
body.clean #stage{padding:14px 70px}
body.clean #zoomer{inset:14px 70px}
body.clean .nav{opacity:0;transition:opacity .4s}
body.clean.clean-awake .nav:not(.off){opacity:1}
#clean-edge{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none;opacity:0;transition:opacity .3s;
  background:linear-gradient(to right,transparent,var(--accent),transparent)}
body.clean.clean-awake #clean-edge{opacity:.55}
body.clean #app{cursor:default}
body.clean:not(.clean-awake) #app{cursor:none}
@media (max-width:700px){body.clean #stage{padding:6px}body.clean #zoomer{inset:6px}}

.fe-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--frame);pointer-events:none;z-index:2}
.tp-box.ip-box{border-color:#2f7bf6;background:rgba(47,123,246,.10)}
.tp-box.ip-box:hover{background:rgba(47,123,246,.25)}
.fe-shape{border-radius:0 !important}

/* share panel */
#share{position:fixed;inset:0;z-index:120;background:rgba(40,34,24,.35);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:grid;place-items:center;padding:16px;font-family:var(--sans)}
#share .sh-box{width:min(440px,100%);background:#fff;border-radius:18px;padding:18px 20px 20px;box-shadow:0 20px 60px rgba(0,0,0,.25);color:var(--ink)}
#share .sh-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
#share .sh-head b{font-family:var(--serif);font-size:22px;font-weight:500}
#share .sh-note{background:#f7f2e8;border-radius:10px;padding:10px 12px;font-size:13.5px;line-height:1.6;color:#6b604c;margin-bottom:12px}
#share .sh-link{display:flex;gap:6px}
#share .sh-link input{flex:1;min-width:0;height:38px;border:1px solid #e0dbcf;border-radius:9px;padding:0 10px;font:13px var(--sans);direction:ltr;background:#fcfbf8;color:#555}
#share button.sh-copy,#share .sh-copy-embed{height:38px;padding:0 14px;border:0;border-radius:9px;background:var(--accent);color:#fff;cursor:pointer;font:500 13.5px var(--sans);white-space:nowrap}
#share .sh-chk{display:flex;align-items:center;gap:7px;font-size:13px;color:#6f6a5c;margin:10px 2px 14px}
#share .sh-row{display:flex;gap:8px;justify-content:space-between}
#share .sh-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border-radius:12px;border:1px solid #eee8dc;background:#fcfbf8;cursor:pointer;color:var(--ink);text-decoration:none;font-size:12px;transition:background .2s,transform .2s}
#share .sh-btn:hover{background:#fff;transform:translateY(-2px)}
#share .sh-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#share .sh-embed{margin-top:14px;font-size:13px;color:#6f6a5c}
#share .sh-embed summary{cursor:pointer}
#share .sh-embed textarea{width:100%;margin:8px 0;border:1px solid #e0dbcf;border-radius:9px;padding:8px;font:12px ui-monospace,monospace;direction:ltr;resize:none;background:#fcfbf8}
#share.sh-local .sh-link,#share.sh-local .sh-chk,#share.sh-local .sh-row,#share.sh-local .sh-embed{opacity:.4;pointer-events:none}

/* rotation handle */
.hdl.rot{left:50%;top:-34px;margin-left:-7px;width:14px;height:14px;border-radius:50%;cursor:grab;background:#fff}
.hdl.rot::after{content:"";position:absolute;left:50%;top:12px;width:1.5px;height:20px;margin-left:-.75px;background:#2f7bf6;pointer-events:none}
.hdl.rot:active{cursor:grabbing}

.layer-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.layer-row .eb{justify-content:center;padding:0 8px}

.ed-page .fe.fe-patch{pointer-events:none;outline:none !important}
.ed-page .fe-shape.drop-target::after{content:"תמונה / וידאו בתוך הצורה"}
.ed-page .fe.cropping{outline:2px solid #e2a23b !important;cursor:move}
.ed-page .fe.cropping .hdl{display:none}

/* corner picker – which corners are rounded */
.corner-pick{display:flex;align-items:center;gap:12px;margin:4px 0 10px}
.corner-pick .lbl{font-size:12px;color:#77705f;flex:0 0 auto}
.cp-box{position:relative;width:64px;height:48px;border:1.5px dashed #c9bfae;border-radius:3px;direction:ltr;flex:0 0 auto}
.cp-box .cp{position:absolute;width:20px;height:20px;padding:0;border:0;background:transparent;cursor:pointer}
.cp-box .cp::before{content:"";position:absolute;inset:3px;border:2.5px solid #c9bfae;border-radius:0}
.cp-box .cp.tl{left:-6px;top:-6px}.cp-box .cp.tl::before{border-right:0;border-bottom:0}
.cp-box .cp.tr{right:-6px;top:-6px}.cp-box .cp.tr::before{border-left:0;border-bottom:0}
.cp-box .cp.br{right:-6px;bottom:-6px}.cp-box .cp.br::before{border-left:0;border-top:0}
.cp-box .cp.bl{left:-6px;bottom:-6px}.cp-box .cp.bl::before{border-right:0;border-top:0}
.cp-box .cp.on::before{border-color:#56664b}
.cp-box .cp.tl.on::before{border-top-left-radius:10px}.cp-box .cp.tr.on::before{border-top-right-radius:10px}
.cp-box .cp.br.on::before{border-bottom-right-radius:10px}.cp-box .cp.bl.on::before{border-bottom-left-radius:10px}
.cp-box .cp:hover::before{border-color:#8a9a7d}
.cp-all{display:flex;flex-direction:column;gap:3px;white-space:nowrap}
.cp-all button i{position:relative;display:inline-block;width:20px;height:14px;vertical-align:middle;margin-inline-end:5px}
.cp-all button{font:inherit;font-size:11px;padding:2px 8px;display:flex;align-items:center;border:1px solid #ddd3c2;border-radius:10px;background:#fff;color:#5d5747;cursor:pointer}
.cp-all button:hover{background:#f3eee5}

/* ---------- sound: audio button & speaker on videos ---------- */
.fe-audio .au-btn{position:absolute;inset:0;margin:auto;width:min(100cqw,100cqh);height:min(100cqw,100cqh);border:0;padding:0;border-radius:50%;cursor:pointer;
  background:var(--ac);color:#fff;display:grid;place-items:center;box-shadow:0 4px 16px rgba(0,0,0,.18);transition:transform .2s, box-shadow .2s}
.fe-audio{container-type:size;overflow:visible!important}
.fe-audio .au-btn:hover{transform:scale(1.06);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.fe-audio .au-btn svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fe-audio .eq{display:none;align-items:flex-end;gap:7%;width:44%;height:40%}
.fe-audio .eq i{flex:1;background:currentColor;border-radius:2px;height:30%;animation:eq 0.9s ease-in-out infinite}
.fe-audio .eq i:nth-child(2){animation-delay:-.3s}.fe-audio .eq i:nth-child(3){animation-delay:-.6s}.fe-audio .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.fe-audio.playing .au-btn svg{display:none}.fe-audio.playing .eq{display:flex}
.fe-audio.waiting .au-btn{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.0),0 4px 16px rgba(0,0,0,.18)}50%{box-shadow:0 0 0 8px rgba(255,255,255,.45),0 4px 16px rgba(0,0,0,.18)}}
/* invisible hot-spot over a picture */
.fe-audio.look-hidden .au-btn{inset:0;width:100%;height:100%;border-radius:inherit;background:transparent;box-shadow:none;transform:none}
.fe-audio.look-hidden .au-btn:hover{background:rgba(255,240,190,.18)}
.fe-audio.look-hidden .au-btn svg,.fe-audio.look-hidden .eq{position:absolute;right:6px;bottom:6px;width:26px;height:26px;padding:5px;box-sizing:border-box;border-radius:50%;background:var(--ac);opacity:0;transition:opacity .25s}
.fe-audio.look-hidden .au-btn:hover svg,.fe-audio.look-hidden.playing .eq{opacity:.9}
.fe-audio.look-hidden.playing .eq{display:flex;gap:2px;align-items:flex-end}
.ed-page .fe-audio.look-hidden{background:rgba(86,102,75,.12)}
.ed-page .fe-audio.look-hidden .au-btn svg{opacity:.9}
.fe-snd{position:absolute;left:8px;bottom:8px;width:30px;height:30px;border-radius:50%;border:0;padding:0;cursor:pointer;z-index:3;
  background:rgba(20,20,20,.55);display:grid;place-items:center;transition:background .2s, opacity .2s;opacity:.85;box-shadow:0 1px 6px rgba(0,0,0,.25)}
.fe-snd:hover{opacity:1;background:rgba(20,20,20,.6)}
.fe-snd svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fe-snd svg .b{fill:#fff}
.fe-snd .x{display:none}.fe-snd.off .x{display:inline}.fe-snd.off .w{display:none}
.fe-snd.hint{opacity:1;animation:pulse 1.6s ease-in-out infinite}
body.clean .fe-snd{opacity:.5}
.fe-shape .fe-play svg,.fe-shape .fe-snd svg{position:static!important;inset:auto!important;display:block;overflow:visible}
.fe-shape .fe-play svg{width:42%!important;height:42%!important}.fe-shape .fe-snd svg{width:17px!important;height:17px!important}

/* ---------- buttons (library) ---------- */
.fe-btn{overflow:visible!important}
.btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.6em;padding:0 1em;box-sizing:border-box;text-decoration:none;cursor:pointer;
  color:var(--bt);border-radius:var(--br);white-space:nowrap;overflow:hidden;isolation:isolate;line-height:1;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,background-color .35s,color .35s,letter-spacing .35s,filter .35s}
.btn:active{transform:scale(.97)!important}
.btn .bt-tx,.btn .bt-ic{position:relative;z-index:1}
.btn .bt-ic{display:inline-grid;place-items:center;transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .35s,color .35s}
.btn .bt-ar{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn.rtl .bt-ar{transform:scaleX(-1)}
/* 1 solid – lifts */
.btn-solid{background:var(--bc);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.btn-solid:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 12px 24px -8px rgba(0,0,0,.4)}
/* 2 outline – fills */
.btn-outline{box-shadow:inset 0 0 0 1.5px var(--bc)}
.btn-outline:hover{background:var(--bc);color:var(--bh)}
/* 3 slide – colour slides in */
.btn-slide{box-shadow:inset 0 0 0 1.5px var(--bc)}
.btn-slide::before{content:"";position:absolute;inset:0;background:var(--bc);transform:translateX(-101%);transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:0}
.btn-slide.rtl::before{transform:translateX(101%)}
.btn-slide:hover{color:var(--bh)}
.btn-slide:hover::before{transform:none}
/* 4 arrow – the arrow walks */
.btn-arrow{background:var(--bc);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.btn-arrow:hover{box-shadow:0 10px 22px -8px rgba(0,0,0,.4)}
.btn-arrow:hover .bt-ic{transform:translateX(.35em)}
.btn-arrow.rtl:hover .bt-ic{transform:translateX(-.35em)}
/* 5 underline – a line grows from the centre */
.btn-underline{overflow:visible}
.btn-underline .bt-tx::after{content:"";position:absolute;left:50%;right:50%;bottom:-.35em;height:1.5px;background:var(--bc);transition:left .4s cubic-bezier(.2,.7,.2,1),right .4s cubic-bezier(.2,.7,.2,1)}
.btn-underline .bt-tx::before{content:"";position:absolute;left:35%;right:35%;bottom:-.35em;height:1px;background:var(--bc);opacity:.35}
.btn-underline:hover .bt-tx::after{left:0;right:0}
.btn-underline:hover{letter-spacing:.04em}
/* 6 text + circle – the circle fills, the arrow moves */
.btn-circle{overflow:visible;gap:.8em}
.btn-circle .bt-ic{width:2.3em;height:2.3em;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--bc)}
.btn-circle:hover .bt-ic{background:var(--bc);color:var(--bh);transform:translateX(.25em)}
.btn-circle.rtl:hover .bt-ic{transform:translateX(-.25em)}
/* 7 gold shine – a light sweep */
.btn-shine{background:var(--bc);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.btn-shine::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .7s ease;z-index:0}
.btn-shine:hover::before{left:120%}
.btn-shine:hover{box-shadow:0 10px 24px -8px rgba(0,0,0,.4)}
/* 8 glow */
.btn-glow{background:var(--bc)}
.btn-glow:hover{box-shadow:0 0 0 4px color-mix(in srgb,var(--bc) 30%,transparent),0 0 26px color-mix(in srgb,var(--bc) 75%,transparent);transform:translateY(-1px)}
/* 9 soft */
.btn-soft{background:var(--bc);box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 12px -4px rgba(0,0,0,.14)}
.btn-soft:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(0,0,0,.06),0 18px 30px -12px rgba(0,0,0,.3)}
/* 10 glass – for photos / dark pages */
.btn-glass{background:color-mix(in srgb,var(--bc) 16%,transparent);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bc) 55%,transparent)}
.btn-glass:hover{background:color-mix(in srgb,var(--bc) 30%,transparent);transform:translateY(-1px)}
/* library window */
.btn-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:8px}
.bp-cell{display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid #e0dbcf;border-radius:12px;background:#fcfbf8;cursor:pointer;padding:8px 6px 8px;font:inherit}
.bp-cell:hover{border-color:var(--accent);background:#fff}
.bp-cell.dark{background:linear-gradient(135deg,#5b6a52,#8b7a5e)}
.bp-cell.dark span{color:#fff}
.bp-stage{position:relative;width:200px;height:64px;--pw:200px}
.bp-stage .fe{outline:0!important;cursor:pointer}
.bp-cell > span{font-size:12px;color:#666}
.ed-page .fe-btn .btn{pointer-events:auto}

/* ---------- buttons, part 2: minimal & playful ---------- */
.btn .bt-in{position:relative;display:inline-block}
.btn.tap{animation:btnTap .45s cubic-bezier(.2,.7,.2,1)}
@keyframes btnTap{0%{transform:scale(1)}35%{transform:scale(.95)}100%{transform:scale(1)}}
.btn .rip{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:currentColor;opacity:.28;pointer-events:none;z-index:0;animation:rip .7s ease-out forwards}
@keyframes rip{to{transform:scale(40);opacity:0}}
/* dot that grows into the whole button */
.btn-dot{gap:.7em}
.btn-dot::before{content:"";position:absolute;z-index:0;top:50%;left:1em;width:.45em;height:.45em;margin-top:-.225em;border-radius:999px;background:var(--bc);
  transition:all .5s cubic-bezier(.7,0,.2,1)}
.btn-dot.rtl::before{left:auto;right:1em}
.btn-dot .bt-tx{transform:translateX(.5em);transition:transform .5s cubic-bezier(.7,0,.2,1)}
.btn-dot.rtl .bt-tx{transform:translateX(-.5em)}
.btn-dot:hover::before{top:0;left:0;right:0;width:100%;height:100%;margin:0;border-radius:var(--br)}
.btn-dot:hover{color:var(--bh)}
.btn-dot:hover .bt-tx{transform:none}
/* swipe – the line leaves on one side and comes back from the other */
.btn-swipe,.btn-brackets,.btn-ext,.btn-lines,.btn-frame,.btn-roll,.btn-wave,.btn-marker,.btn-line{overflow:visible}
.btn-swipe .bt-tx::after{content:"";position:absolute;left:0;right:0;bottom:-.35em;height:1px;background:var(--bc);transform-origin:right}
.btn-swipe:hover .bt-tx::after{animation:swipe .7s cubic-bezier(.7,0,.2,1)}
@keyframes swipe{0%{transform:scaleX(1);transform-origin:right}49%{transform:scaleX(0);transform-origin:right}50%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
/* lines above & below, from opposite sides */
.btn-lines::before,.btn-lines::after{content:"";position:absolute;height:1px;background:var(--bc);width:0;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.btn-lines::before{top:12%;left:0}.btn-lines::after{bottom:12%;right:0}
.btn-lines:hover::before,.btn-lines:hover::after{width:100%}
.btn-lines:hover{letter-spacing:.06em}
/* corner brackets that grow into a full frame */
.btn-frame::before,.btn-frame::after{content:"";position:absolute;width:.9em;height:.9em;border:0 solid var(--bc);transition:width .5s cubic-bezier(.2,.7,.2,1),height .5s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.btn-frame::before{top:0;left:0;border-top-width:1.5px;border-left-width:1.5px}
.btn-frame::after{bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px}
.btn-frame:hover::before,.btn-frame:hover::after{width:100%;height:100%}
/* text rolls up and a copy rolls in */
.btn-roll .bt-tx{overflow:hidden;line-height:1.25;padding:.05em 0}
.btn-roll .bt-in{transition:transform .45s cubic-bezier(.7,0,.2,1)}
.btn-roll .bt-in::after{content:attr(data-t);position:absolute;left:0;right:0;top:100%;padding-top:.05em}
.btn-roll:hover .bt-in{transform:translateY(-100%)}
.btn-roll .bt-tx::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--bc);opacity:.3}
/* every letter jumps, one after the other */
.btn-wave .ch{display:inline-block;white-space:pre}
.btn-wave:hover .ch{animation:wave .55s cubic-bezier(.3,.7,.3,1) calc(var(--i) * 35ms)}
@keyframes wave{0%,100%{transform:none}40%{transform:translateY(-.32em)}70%{transform:translateY(.05em)}}
/* marker highlight rises behind the words */
.btn-marker .bt-in{padding:0 .2em}
.btn-marker .bt-in::before{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:.05em;height:.32em;background:var(--bc);border-radius:2px;transition:height .4s cubic-bezier(.2,.7,.2,1)}
.btn-marker:hover .bt-in::before{height:1.15em}
/* a short line that stretches and becomes an arrow */
.btn-line{gap:.7em}
.btn-line .bt-ln{width:2.4em;height:.75em;fill:none;stroke:var(--bc);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.btn-line.rtl .bt-ln{transform:scaleX(-1)}
.btn-line .ln{stroke-dasharray:37;stroke-dashoffset:18;transition:stroke-dashoffset .5s cubic-bezier(.2,.7,.2,1)}
.btn-line .hd{opacity:0;transform:translateX(-6px);transition:opacity .3s .1s,transform .45s cubic-bezier(.2,.7,.2,1)}
.btn-line:hover .ln{stroke-dashoffset:0}
.btn-line:hover .hd{opacity:1;transform:none}
/* library window */
.bp-box{width:min(860px,95vw)!important;max-height:90vh;overflow:auto}
.bp-h{grid-column:1/-1;margin:10px 2px 0;font-size:13px;font-weight:600;color:#77705f}
/* brackets slide in around the words */
.btn-brackets .bt-tx::before,.btn-brackets .bt-tx::after{content:"";position:absolute;top:-.3em;bottom:-.3em;width:.32em;border:1.5px solid var(--bc);opacity:0;transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
.btn-brackets .bt-tx::before{left:-.7em;border-right:0;transform:translateX(-.5em)}
.btn-brackets .bt-tx::after{right:-.7em;border-left:0;transform:translateX(.5em)}
.btn-brackets:hover .bt-tx::before,.btn-brackets:hover .bt-tx::after{opacity:1;transform:none}
/* external link: the arrow lifts up and away, a line draws under */
.btn-ext{gap:.35em}
.btn-ext .bt-ic{overflow:hidden;width:1.05em;height:1.05em}
.btn-ext .bt-ar{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.btn-ext:hover .bt-ar{animation:extFly .55s cubic-bezier(.6,0,.2,1)}
.btn-ext.rtl:hover .bt-ar{animation-name:extFlyR}
@keyframes extFly{0%{transform:none}45%{transform:translate(110%,-110%)}46%{transform:translate(-110%,110%)}100%{transform:none}}
@keyframes extFlyR{0%{transform:scaleX(-1)}45%{transform:scaleX(-1) translate(110%,-110%)}46%{transform:scaleX(-1) translate(-110%,110%)}100%{transform:scaleX(-1)}}
.btn-ext .bt-tx::after{content:"";position:absolute;left:0;right:0;bottom:-.3em;height:1px;background:var(--bc);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.btn-ext.rtl .bt-tx::after{transform-origin:right}
.btn-ext:hover .bt-tx::after{transform:scaleX(1)}

/* ---------- info hot-spots ---------- */
.fe-hot{overflow:visible!important;container-type:size}
.hs-mk{position:absolute;inset:0;margin:auto;width:100cqmin;height:100cqmin;border:0;padding:0;background:transparent;cursor:pointer;border-radius:50%;display:grid;place-items:center;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);-webkit-tap-highlight-color:transparent}
.fe-hot:hover .hs-mk,.fe-hot.open .hs-mk{transform:scale(1.14)}
/* ring – like a target */
.hl-ring .hs-mk{box-shadow:inset 0 0 0 max(1.5px,9cqmin) var(--hc),inset 0 0 0 calc(max(1.5px,9cqmin) + 1px) rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.14),0 1px 8px rgba(0,0,0,.35)}
.hl-ring .hs-mk i{width:28%;height:28%;border-radius:50%;background:var(--hc);box-shadow:0 0 0 1px rgba(0,0,0,.14),0 0 5px rgba(0,0,0,.35)}
/* dot with a halo */
.hl-dot .hs-mk{background:color-mix(in srgb,var(--hc) 35%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.hl-dot .hs-mk i{width:44%;height:44%;border-radius:50%;background:var(--hc);box-shadow:0 1px 5px rgba(0,0,0,.35)}
/* plus – turns into × when open */
.hl-plus .hs-mk{background:var(--hc);box-shadow:0 2px 10px rgba(0,0,0,.3)}
.hl-plus .hs-mk svg{width:52%;height:52%;fill:none;stroke:var(--hk);stroke-width:2;stroke-linecap:round;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.hl-plus.open .hs-mk svg{transform:rotate(45deg)}
/* number */
.hl-num .hs-mk{background:var(--hc);color:var(--hk);box-shadow:0 2px 10px rgba(0,0,0,.3);font:600 46cqmin/1 var(--sans)}
/* gentle pulse */
.fe-hot.pulse .hs-mk::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 max(1px,5cqmin) var(--hc);opacity:0;animation:hsPulse 2.6s ease-out infinite;pointer-events:none}
.fe-hot.open .hs-mk::after{animation:none}
@keyframes hsPulse{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(2.1);opacity:0}}
/* the card */
.hs-card{position:absolute;top:50%;z-index:5;background:#fff;color:#2f2d27;border-radius:calc(var(--pw) * .016);overflow:hidden;box-shadow:0 18px 50px -12px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.12);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s, transform .4s cubic-bezier(.2,.7,.2,1), visibility 0s .4s;text-align:start}
.to-r .hs-card{left:calc(100% + var(--pw) * .018);transform:translate(-10px,-50%) scale(.96);transform-origin:left center}
.to-l .hs-card{right:calc(100% + var(--pw) * .018);transform:translate(10px,-50%) scale(.96);transform-origin:right center}
.fe-hot.open .hs-card,.ed-page .fe-hot.sel .hs-card{opacity:1;visibility:visible;pointer-events:auto;transform:translate(0,-50%);transition:opacity .3s, transform .4s cubic-bezier(.2,.7,.2,1), visibility 0s}
.ed-page .fe-hot.sel .hs-card{pointer-events:none}
.hs-card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;position:static;inset:auto}
.hs-body{padding:calc(var(--pw) * .028) calc(var(--pw) * .03) calc(var(--pw) * .03)}
.hs-t{font-size:var(--ts);font-weight:600;line-height:1.15;letter-spacing:.01em}
.hs-x{font-size:var(--xs);line-height:1.5;opacity:.78;margin-top:.5em;white-space:pre-wrap}
.hs-a{display:inline-flex;align-items:center;gap:.45em;margin-top:.9em;font-size:var(--xs);font-weight:600;color:inherit;text-decoration:none;cursor:pointer;letter-spacing:.04em;position:relative}
.hs-a::after{content:"";position:absolute;left:0;right:0;bottom:-.25em;height:1px;background:currentColor;opacity:.35;transition:opacity .3s}
.hs-a:hover::after{opacity:1}
.hs-a svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.hs-card[dir=rtl] .hs-a svg{transform:scaleX(-1)}
.hs-a:hover svg{transform:translateX(.3em)}
.hs-card[dir=rtl] .hs-a:hover svg{transform:scaleX(-1) translateX(.3em)}
.hs-card.dark{background:#24221d;color:#f3eee4}
.ed-page .fe-hot{outline-offset:2px}

/* ---------- table of contents: drawer ---------- */
#toc{position:fixed;inset:0;z-index:55;background:rgba(40,34,24,.28);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .35s}
#toc.open{opacity:1;pointer-events:auto}
.toc-panel{position:absolute;top:0;bottom:0;left:0;width:min(400px,88vw);background:var(--bg);box-shadow:12px 0 50px rgba(0,0,0,.18);display:flex;flex-direction:column;
  transform:translateX(-102%);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
#toc.rtl .toc-panel{left:auto;right:0;box-shadow:-12px 0 50px rgba(0,0,0,.18);transform:translateX(102%)}
#toc.open .toc-panel{transform:none}
.toc-head{display:flex;align-items:center;justify-content:space-between;padding:26px 22px 14px 28px;border-bottom:1px solid rgba(0,0,0,.08)}
#toc.rtl .toc-head{padding:26px 28px 14px 22px}
.toc-ttl{font-family:var(--serif);font-size:26px;letter-spacing:.01em;color:var(--ink)}
#toc.rtl .toc-ttl{font-family:'Assistant','Heebo',var(--sans);font-weight:600;font-size:22px}
.toc-list{overflow:auto;padding:10px 12px 30px}
.toc-it{display:flex;align-items:center;gap:14px;width:100%;border:0;background:transparent;cursor:pointer;padding:10px 14px;border-radius:12px;text-align:start;font:inherit;color:var(--ink);
  position:relative;transition:background .25s;opacity:0;transform:translateY(8px)}
#toc.open .toc-it{animation:tocIn .5s cubic-bezier(.2,.7,.2,1) forwards}
#toc.open .toc-it:nth-child(2){animation-delay:.04s}#toc.open .toc-it:nth-child(3){animation-delay:.08s}#toc.open .toc-it:nth-child(4){animation-delay:.12s}
#toc.open .toc-it:nth-child(5){animation-delay:.16s}#toc.open .toc-it:nth-child(6){animation-delay:.2s}#toc.open .toc-it:nth-child(n+7){animation-delay:.24s}
@keyframes tocIn{to{opacity:1;transform:none}}
.toc-it:hover{background:rgba(0,0,0,.045)}
.ti-th{flex:0 0 auto;width:38px;aspect-ratio:3/4;border-radius:3px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.18);background:#fff;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ti-th img{width:100%;height:100%;object-fit:cover;display:block}
.toc-it:hover .ti-th{transform:scale(1.08) rotate(-2deg)}
.ti-n{font:500 12px/1 var(--sans);color:var(--accent);opacity:.8;letter-spacing:.06em;min-width:18px}
.ti-t{flex:1;font-size:16px;line-height:1.3;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
#toc.rtl .ti-t{font-family:'Assistant','Heebo',var(--sans)}
#toc:not(.rtl) .ti-t{font-family:var(--serif);font-size:18px}
.toc-it:hover .ti-t{transform:translateX(4px)}
#toc.rtl .toc-it:hover .ti-t{transform:translateX(-4px)}
.ti-p{font:400 13px/1 var(--sans);color:#8c8576;font-variant-numeric:tabular-nums}
.toc-it.cur{background:rgba(0,0,0,.05)}
.toc-it.cur::before{content:"";position:absolute;top:12px;bottom:12px;left:3px;width:3px;border-radius:2px;background:var(--accent)}
#toc.rtl .toc-it.cur::before{left:auto;right:3px}
/* ---------- table of contents: on a page ---------- */
.fe-toc{display:flex;flex-direction:column;justify-content:flex-start;overflow:visible!important;line-height:1.3}
.tc-h{margin-bottom:.55em;line-height:1.1;letter-spacing:.01em}
.tc-row{display:flex;align-items:baseline;gap:.5em;padding:calc(var(--lh) * .5em) 0;color:inherit;text-decoration:none;cursor:pointer;position:relative}
.tc-n{color:var(--ta);font-size:.72em;letter-spacing:.08em;min-width:1.8em}
.tc-t{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.tc-l{flex:1;align-self:center;margin-top:.35em;min-width:1em;transition:opacity .3s}
.ld-dots .tc-l{border-bottom:max(1px,.12em) dotted var(--ta);opacity:.7}
.ld-line .tc-l{border-bottom:1px solid var(--ta);opacity:.45}
.tc-p{color:var(--ta);font-variant-numeric:tabular-nums;font-size:.9em}
.tc-row:hover .tc-t{transform:translateX(.3em)}
.fe-toc[dir=rtl] .tc-row:hover .tc-t{transform:translateX(-.3em)}
.tc-row:hover .tc-l{opacity:1}
.tc-empty{font-size:.7em;opacity:.55;border:1px dashed currentColor;border-radius:6px;padding:1em;text-align:center}
/* editor */
.ep-toc{display:flex;align-items:center;justify-content:center;gap:6px;width:110px;margin:0 auto 12px;padding:7px 6px;border:1px solid #d9d3c6;border-radius:9px;background:#fff;cursor:pointer;font:inherit;font-size:12px;color:#4a463c}
.ep-toc:hover{border-color:var(--accent)}
.ep-toc svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.ep-toc b{background:var(--accent);color:#fff;border-radius:9px;padding:0 6px;font-size:10px;font-weight:600}
.toc-box{width:min(560px,94vw)!important;max-height:90vh;overflow:auto}
.toc-rows{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.toc-row{display:flex;align-items:center;gap:6px}
.toc-row .k{width:20px;font-size:12px;color:#999;text-align:center}
.toc-row .tt{flex:1}
.toc-row .tp{width:70px}
.toc-row input{height:34px;border:1px solid #ddd6c8;border-radius:8px;padding:0 10px;font:inherit;font-size:14px;box-sizing:border-box}
.toc-row .eb{padding:4px 10px}
.ed-page .fe .tag{white-space:nowrap}
.ed-page .fe.tiny .tag{top:50%;left:calc(100% + 8px);transform:translateY(-50%);opacity:.9}
.ed-page .fe-hot.tiny.to-r.sel .tag{left:auto;right:calc(100% + 8px)}
/* smart guides while dragging */
.ed-guide{position:absolute;z-index:9999;pointer-events:none;background:#e0457b}
.ed-guide.v{top:0;bottom:0;width:1px;margin-left:-.5px}
.ed-guide.h{height:1px;margin-top:-.5px}
.ed-guide.mid.pg{background:repeating-linear-gradient(var(--gd,180deg),#e0457b 0 6px,transparent 6px 10px)}
.ed-guide.h.mid.pg{--gd:90deg}
.z-size{font-size:11.5px;color:#8a8375;padding:0 10px 0 8px;border-left:1px solid #e6e1d6;margin-left:4px;white-space:nowrap;letter-spacing:.02em}
.pg-size{font-size:12.5px;color:#6f695b;background:#f6f3ec;border-radius:8px;padding:7px 10px;margin:-2px 0 12px}
.pg-size b{font-weight:600;color:#4a463c}

/* ---------- studio: new book from templates ---------- */
#st-tpl,#st-lib{display:flex;align-items:center;gap:14px;width:100%;margin:14px 0 0;padding:14px 20px;border-radius:16px;border:1px solid rgba(80,70,50,.16);background:rgba(255,255,255,.55);cursor:pointer;text-align:right;font:inherit;color:var(--ink);transition:background .2s,transform .2s,border-color .2s}
#st-tpl:hover,#st-lib:hover{background:rgba(255,255,255,.95);border-color:var(--accent);transform:translateY(-2px)}
#st-tpl svg,#st-lib svg{width:30px;height:30px;flex:0 0 auto;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linejoin:round}
#st-tpl span,#st-lib span{display:flex;flex-direction:column;gap:2px}
#st-tpl b,#st-lib b{font-weight:500;font-size:15.5px}
#st-tpl small,#st-lib small{font-size:12.5px;color:var(--muted)}

/* ---------- templates ---------- */
.ed-modal .box h3{font-size:13px;font-weight:600;color:#6b665b;margin:14px 0 6px}
.seg{display:inline-flex;background:#f1eee7;border-radius:10px;padding:3px;gap:2px;margin-bottom:6px}
.seg button{border:0;background:transparent;padding:7px 16px;border-radius:8px;cursor:pointer;font-size:13.5px;color:#555}
.seg button.on{background:#fff;color:#222;box-shadow:0 1px 4px rgba(0,0,0,.12);font-weight:500}
.tpl-modal .box{width:min(1100px,95vw);max-height:90vh;display:flex;flex-direction:column;padding:20px 24px 10px}
.tpl-head{display:flex;align-items:center;gap:18px}
.tpl-head h2{margin:0}
.tpl-tabs{display:flex;flex-wrap:wrap;gap:4px;background:#f1eee7;border-radius:12px;padding:4px}
.tpl-tabs button{border:0;background:transparent;padding:8px 18px;border-radius:9px;cursor:pointer;font-size:14px;color:#555}
.tpl-tabs button.on{background:#fff;color:#222;box-shadow:0 1px 4px rgba(0,0,0,.12);font-weight:500}
.tpl-x{margin-inline-start:auto}
.tpl-grid{overflow:auto;display:flex;flex-wrap:wrap;gap:26px 22px;padding:8px 4px 22px;align-content:flex-start}
.tpl-card{border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:9px;font:inherit;font-size:13px;color:#444}
.tpl-pv{display:flex;direction:ltr;box-shadow:0 6px 18px rgba(40,30,15,.16),0 1px 3px rgba(40,30,15,.12);transition:transform .25s,box-shadow .25s;border-radius:2px;overflow:hidden}
.tpl-card.spread .tpl-pv .mini-page:first-child{box-shadow:inset -10px 0 14px -10px rgba(0,0,0,.25)}
.tpl-card:hover .tpl-pv{transform:translateY(-4px);box-shadow:0 14px 30px rgba(40,30,15,.22),0 2px 6px rgba(40,30,15,.12)}
.tpl-card:hover span{color:var(--accent)}
.mini-page .fe{outline:none!important}
.ph-hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:none;color:rgba(70,62,50,.55);font-family:var(--sans);font-size:12px;text-align:center}
.ph-hint.dark{color:rgba(255,255,255,.6)}
.ph-hint svg{width:clamp(16px,22%,34px);height:auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ed-page .fe.tiny .ph-hint span{display:none}
.ed-page .fe-shape.drop-target .ph-hint{color:var(--accent)}
.eb.tpl-btn{background:#f4efe4}
.eb.nb-btn{background:#f4efe4}
/* toolbar: stay on one line on narrower screens */
#ed-status{white-space:nowrap}
@media (max-width:1680px){ #ed-bar{gap:2px;padding:0 8px} #ed-bar .eb{padding:0 9px;gap:5px;font-size:13.5px} #ed-bar .sep{margin:0 3px} }
@media (max-width:1440px){ #ed-status{display:none} #ed-bar .eb[data-a=redo],#ed-bar .eb[data-a=undo]{padding:0 6px} }

/* ---------- entrance effects ---------- */
.fx{opacity:0}
.fx.fx-on{animation:var(--fx-n,fxFade) var(--fx-t,1.2s) var(--fx-e,cubic-bezier(.22,.61,.36,1)) var(--fx-d,0s) both}
.fx-fade{--fx-n:fxFade}
.fx-rise{--fx-n:fxRise}
.fx-slide.fx-from-l{--fx-n:fxSlideL}
.fx-slide.fx-from-r{--fx-n:fxSlideR}
.fx-blur{--fx-n:fxBlur}
.fx-reveal.fx-from-l{--fx-n:fxRevealL;--fx-e:cubic-bezier(.65,0,.25,1)}
.fx-reveal.fx-from-r{--fx-n:fxRevealR;--fx-e:cubic-bezier(.65,0,.25,1)}
.fx-tracking{--fx-n:fxTrack;--fx-e:cubic-bezier(.16,.7,.3,1)}
.fx-zoom{--fx-n:fxFade}
.fx-zoom.fx-on>svg,.fx-zoom.fx-on>img,.fx-zoom.fx-on>video{animation:fxZoomIn calc(var(--fx-t,1.3s) * 2.2) cubic-bezier(.16,.7,.3,1) var(--fx-d,0s) both;transform-origin:50% 50%}
/* floating pictures: a slow breath up and down, each one at its own pace */
.fl{animation:fxFloat var(--fl-t,9s) cubic-bezier(.45,0,.55,1) var(--fl-d,0s) infinite}
.fx.fl:not(.fx-on){animation:none}
.fx.fx-on.fl{animation:var(--fx-n,fxFade) var(--fx-t,1.2s) var(--fx-e,cubic-bezier(.22,.61,.36,1)) var(--fx-d,0s) both, fxFloat var(--fl-t,9s) cubic-bezier(.45,0,.55,1) var(--fl-d,0s) infinite}
@keyframes fxFloat{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 calc(var(--pw) * -.013);rotate:var(--fl-r,.4deg)}}
.fl,.plx{will-change:transform;backface-visibility:hidden}
@keyframes fxFade{from{opacity:0}to{opacity:1}}
@keyframes fxRise{from{opacity:0;translate:0 calc(var(--pw) * .035)}to{opacity:1;translate:0 0}}
@keyframes fxSlideL{from{opacity:0;translate:calc(var(--pw) * -.05) 0}to{opacity:1;translate:0 0}}
@keyframes fxSlideR{from{opacity:0;translate:calc(var(--pw) * .05) 0}to{opacity:1;translate:0 0}}
@keyframes fxBlur{from{opacity:0;filter:blur(12px)}to{opacity:1;filter:blur(0)}}
@keyframes fxRevealL{from{opacity:1;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(-40% -40% -40% -40%)}}
@keyframes fxRevealR{from{opacity:1;clip-path:inset(0 0 0 100%)}to{opacity:1;clip-path:inset(-40% -40% -40% -40%)}}
@keyframes fxTrack{from{opacity:0;letter-spacing:calc(var(--fx-ls,0em) + .32em)}to{opacity:1;letter-spacing:var(--fx-ls,0em)}}
@keyframes fxZoomIn{from{scale:1.14}to{scale:1}}
@media (prefers-reduced-motion:reduce){.fx{opacity:1!important;animation:none!important}.fx>*{animation:none!important}.fl{animation:none!important}.plx{transition:none!important}}
@media print{.fx{opacity:1!important;animation:none!important}}
.fx-preview{position:relative}

/* ---------- 3D galleries ---------- */
.fe-gallery.g3{overflow:hidden;cursor:grab;touch-action:pan-y}
.fe-gallery.g3:active{cursor:grabbing}
.g3-stage{position:absolute;inset:0}
.g3-spin{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.g3-card{position:absolute;left:0;top:0;overflow:hidden;background:#ddd6ca;box-shadow:0 10px 26px -8px rgba(30,22,10,.35),0 2px 6px rgba(30,22,10,.12);will-change:transform,opacity}
.g3-card img{width:100%;height:100%;display:block;pointer-events:none;user-select:none}
.g3-ring .g3-card{backface-visibility:visible;transition:box-shadow .3s}
.g3-flow .g3-card{transition:box-shadow .3s}

.g3-reflect .g3-card{-webkit-box-reflect:below 4px linear-gradient(transparent 62%,rgba(255,255,255,.22))}
.g3-stack .g3-spin{transform-style:flat}
.g3-stack .g3-card{background:#fff;padding:3.2%;padding-bottom:3.2%;box-shadow:0 14px 30px -10px rgba(30,22,10,.4),0 2px 6px rgba(30,22,10,.14);transition:transform .55s cubic-bezier(.3,.7,.2,1),opacity .5s;cursor:pointer}
.g3-stack .g3-card img{border-radius:1px}
.g3-full{position:absolute;right:3%;bottom:3%;z-index:200;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.82);display:grid;place-items:center;cursor:pointer;opacity:.75;transition:opacity .2s}
.g3-full:hover{opacity:1}
.g3-full svg{width:16px;height:16px;fill:none;stroke:#2b2925;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ed-page .fe-gallery.g3{cursor:move}

/* ---------- lightbox ---------- */
#lightbox{position:fixed;inset:0;z-index:500;background:rgba(16,15,13,.94);opacity:0;transition:opacity .35s ease;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#lightbox.open{opacity:1}
.lb-img{position:absolute;inset:5vh 8vw}
.lb-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;translate:var(--lb-from,0) 0;scale:.985;transition:opacity .6s ease,translate .7s cubic-bezier(.2,.7,.2,1),scale .7s cubic-bezier(.2,.7,.2,1);user-select:none}
.lb-img img.on{opacity:1;translate:0 0;scale:1}
.lb-img img.out{opacity:0}
.lb-x,.lb-a{position:absolute;border:0;background:transparent;cursor:pointer;color:#fff;opacity:.6;transition:opacity .2s;display:grid;place-items:center}
.lb-x:hover,.lb-a:hover{opacity:1}
.lb-x{top:18px;right:20px;width:44px;height:44px}
.lb-a{top:50%;translate:0 -50%;width:56px;height:80px}
.lb-l{left:1.5vw}.lb-r{right:1.5vw}
.lb-x svg,.lb-a svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.lb-a svg{width:36px;height:36px}
.lb-n{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:rgba(255,255,255,.55);font:400 12px/1 var(--sans);letter-spacing:.18em}
@media (max-width:700px){.lb-img{inset:9vh 3vw}.lb-a{width:40px}}
.g3-card img{position:absolute;inset:0;width:100%;height:100%}
.g3-stack .g3-card img{inset:3.5%;width:93%;height:93%}

/* ---------- pictures on hover ---------- */
@media (hover:hover){
  .hv{transition:scale .55s cubic-bezier(.2,.7,.2,1), filter .55s ease}
  .hv-lift:hover{scale:1.07;z-index:900!important;filter:drop-shadow(0 calc(var(--pw) * .022) calc(var(--pw) * .035) rgba(20,14,6,.32))!important;cursor:zoom-in}
  .hv-lift:not(.fe-clickable):hover{cursor:default}
  .hv-zoom>svg,.hv-zoom>img,.hv-zoom>video{transition:scale 1.1s cubic-bezier(.2,.7,.2,1);transform-origin:50% 50%}
  .hv-zoom:hover>svg,.hv-zoom:hover>img,.hv-zoom:hover>video{scale:1.09}
}
.fx-zoom.fx-on>.fx-end{animation:none!important}

/* 3D tilt towards the mouse, with a soft light on the print */
.hv-tilt{transition:transform .7s cubic-bezier(.2,.7,.2,1), scale .55s cubic-bezier(.2,.7,.2,1), filter .55s ease}
.hv-tilt.tilting{transition:transform .14s linear, scale .55s cubic-bezier(.2,.7,.2,1), filter .55s ease}
.hv-glare{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.42) 0%,rgba(255,255,255,.12) 28%,rgba(255,255,255,0) 60%);mix-blend-mode:soft-light}
@media (hover:hover){
  .hv-tilt:hover{scale:1.04;z-index:900!important;filter:drop-shadow(0 calc(var(--pw) * .026) calc(var(--pw) * .04) rgba(20,14,6,.34))!important}
  .hv-tilt:hover .hv-glare{opacity:1}
}
/* depth: pictures drift against the mouse, the small ones more */
.plx{transition:translate 1.2s cubic-bezier(.2,.7,.2,1)}

/* stack: arrows at the sides, the next print floats up and settles on top */
.g3-nav{position:absolute;top:50%;translate:0 -50%;z-index:300;width:clamp(30px,calc(var(--pw) * .075),44px);height:clamp(30px,calc(var(--pw) * .075),44px);border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 2px 12px rgba(30,22,10,.12);display:grid;place-items:center;opacity:.7;transition:opacity .3s,background .3s,scale .3s}
.g3-nav:hover{opacity:1;background:#fff;scale:1.06}
.g3-nav svg{width:46%;height:46%;fill:none;stroke:#2b2925;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.g3-nav.g3-l{left:1.5%}.g3-nav.g3-r{right:1.5%}
.g3-stack .g3-card.g3-lift{transition:transform .62s cubic-bezier(.2,.7,.2,1),box-shadow .62s ease,opacity .4s;box-shadow:0 34px 60px -20px rgba(30,22,10,.5),0 6px 14px rgba(30,22,10,.16)}
.g3-stack .g3-card.g3-settle{transition:transform .7s cubic-bezier(.3,.6,.25,1),box-shadow .7s ease}

/* ---------- sphere ---------- */
.g3-sphere .g3-card{backface-visibility:visible;border-radius:2px;box-shadow:0 6px 16px -6px rgba(20,14,6,.35)}
.g3-sphere .g3-card.front{box-shadow:0 12px 30px -8px rgba(20,14,6,.45)}
/* ---------- strips ---------- */
.g3-strips{cursor:default}
.gs-row{position:absolute;inset:0;display:flex;gap:1.1%}
.g3-rtl .gs-row{flex-direction:row-reverse}
.gs-strip{position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;transition:flex-grow .85s cubic-bezier(.2,.7,.2,1),filter .6s ease}
.gs-strip img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;transition:scale 1.2s cubic-bezier(.2,.7,.2,1)}
.gs-strip.on{flex-grow:5.5}
.gs-any .gs-strip:not(.on){filter:saturate(.75) brightness(.82)}
.gs-strip.on img{scale:1.03}
.gs-strip span{position:absolute;left:10%;bottom:4%;font:500 calc(var(--pw) * .016)/1 var(--sans);letter-spacing:.2em;color:#fff;opacity:.0;transition:opacity .6s;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.gs-strip.on span{opacity:.9}
/* ---------- magnifying glass ---------- */
.hv-loupe{cursor:none}
#loupe{position:fixed;z-index:450;pointer-events:none;border-radius:50%;background-repeat:no-repeat;background-color:#ddd;
  box-shadow:0 0 0 2px rgba(255,255,255,.92),0 14px 34px rgba(0,0,0,.35),inset 0 0 18px rgba(0,0,0,.15);opacity:0;scale:.6;transition:opacity .25s ease,scale .3s cubic-bezier(.2,.7,.2,1)}
#loupe.on{opacity:1;scale:1}

/* ---------- time tunnel ---------- */
.g3-tunnel .g3-stage{transform-style:preserve-3d;transition:perspective-origin 1.2s cubic-bezier(.2,.7,.2,1)}
.g3-tunnel .g3-card{left:50%;top:50%;box-shadow:0 20px 40px -18px rgba(0,0,0,.5);cursor:zoom-in}
/* ---------- endless wall ---------- */
.g3-infinite .g3-card{left:0;top:0;border-radius:2px;box-shadow:0 8px 20px -10px rgba(20,14,6,.35);transition:scale .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s;cursor:zoom-in}
.g3-infinite .g3-card{transition:scale .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s ease,filter .6s ease}
.g3-infinite .g3-card.hot{scale:1.035;z-index:5;filter:brightness(1.04);box-shadow:0 22px 40px -14px rgba(20,14,6,.42),0 2px 6px rgba(20,14,6,.12)}
.g3-zoomhint{position:absolute;right:6%;bottom:6%;width:clamp(22px,14%,34px);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;opacity:0;scale:.8;transition:opacity .45s ease,scale .45s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.g3-zoomhint svg{width:55%;height:55%;fill:none;stroke:#2b2925;stroke-width:1.5;stroke-linecap:round}
.g3-card.hot .g3-zoomhint{opacity:1;scale:1}
.g3-infinite.dragging{cursor:grabbing}
.g3-infinite.dragging .g3-card{cursor:grabbing}

/* editor: element type shown as a small quiet icon */
.ed-page .fe .tag{top:4px;left:4px;width:18px;height:18px;padding:0;display:grid;place-items:center;border-radius:5px;background:rgba(255,255,255,.9);color:#2f7bf6;
  box-shadow:0 1px 3px rgba(0,0,0,.18);letter-spacing:0;opacity:.75;transition:opacity .2s}
.ed-page .fe .tag svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ed-page .fe:hover .tag{opacity:1}
.ed-page .fe.sel .tag{background:#2f7bf6;color:#fff;opacity:1}
.ed-page .fe-text .tag{opacity:.45}
.ed-page .fe-text:hover .tag,.ed-page .fe-text.sel .tag{opacity:1}
.ph-hint svg{position:static!important;inset:auto!important;display:block;width:clamp(18px,9%,34px)!important;height:auto!important}
.ed-page .fe-text:not(.tiny) .tag{top:-9px;left:-9px;width:16px;height:16px}.ed-page .fe-text .tag svg{width:10px;height:10px}
.seg{flex-wrap:wrap}

.gx-empty{flex-direction:column;gap:6px;display:flex;align-items:center;justify-content:center}
.gx-empty svg{width:clamp(36px,22%,90px);height:auto;fill:none;stroke:#a89c86;stroke-width:1.3;stroke-linejoin:round}
.gx-empty b{font:600 clamp(12px,calc(var(--pw) * .03),20px) var(--sans);color:#6b6252}
.gx-empty span{font-size:clamp(10px,calc(var(--pw) * .02),13px)}
#toast{direction:rtl;max-width:92vw;text-align:center}

/* progressive loading */
.page img.lz,.page image.lz{opacity:0}
.page .lz-in{animation:lzIn .6s ease}
@keyframes lzIn{from{opacity:0}}

/* stack: no clutter on the print – a quiet counter below, full screen appears on hover */
.g3-stack .g3-full{right:auto;bottom:auto;translate:none;opacity:.45;width:30px;height:30px;background:rgba(255,255,255,.75);transition:opacity .35s}
.g3-stack:hover .g3-full{opacity:.8}
.g3-stack .g3-full:hover{opacity:1}
.g3-count{position:absolute;left:0;right:0;text-align:center;font:400 clamp(10px,calc(var(--pw) * .018),13px)/1 var(--sans);letter-spacing:.2em;color:rgba(60,52,40,.55);pointer-events:none}
.g3-count b{font-weight:500;color:rgba(40,34,26,.85)}
@media (hover:hover){.g3-stack .g3-card.front:not(.g3-lift){transition:transform .55s cubic-bezier(.3,.7,.2,1),opacity .5s,translate .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
  .g3-stack:hover .g3-card.front:not(.g3-lift):not(.g3-settle){translate:0 -1.2%;box-shadow:0 22px 40px -14px rgba(30,22,10,.45),0 3px 8px rgba(30,22,10,.14)}}
.st-ver{font-size:11px;letter-spacing:.08em;color:var(--muted);opacity:.6;margin:-6px 0 6px}

/* hover: a soft brightening of the picture – nothing moves (default for books) */
.hv-glow>svg,.hv-glow>img,.hv-glow>video{transition:filter .7s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){
  .hv-glow:hover>svg,.hv-glow:hover>img,.hv-glow:hover>video{filter:brightness(1.09) saturate(1.04)}
  .hv-glow.fe-clickable:hover{cursor:zoom-in}
}
/* pictures that also drift (depth) keep their hover smooth */
.plx.hv{transition:translate 1.2s cubic-bezier(.2,.7,.2,1),scale .6s cubic-bezier(.2,.7,.2,1),filter .6s ease}

/* ---------- the drawer (your own pictures from a folder) ---------- */
#ed-drawer{grid-area:props;z-index:5;display:flex;flex-direction:column;min-height:0;background:#fbf9f6;border-right:1px solid #e4e0d6;box-shadow:-8px 0 24px -16px rgba(60,40,20,.25)}
#ed-drawer[hidden]{display:none}
#ed-drawer.dw-over{outline:2px dashed var(--accent);outline-offset:-8px}
.eb.dw-btn.on{background:#efe7da}
.dw-hd{display:flex;align-items:center;gap:6px;padding:14px 16px 8px}
.dw-hd b{font-size:16px;font-weight:600;flex:1}
.dw-x,.dw-ic{border:0;background:none;cursor:pointer;color:#9a8f80;font-size:15px;width:28px;height:28px;border-radius:7px}
.dw-ic{font-size:17px}
.dw-x:hover,.dw-ic:hover{background:#f1ece3;color:#2d2b26}
.dw-src{display:flex;align-items:center;gap:8px;margin:0 16px 10px;padding:7px 10px;background:#f2ede5;border-radius:8px;font-size:12.5px;color:#6f6558}
.dw-src svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
.dw-src span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-link{border:0;background:none;padding:0;cursor:pointer;color:var(--accent);font:inherit;font-size:12.5px;font-weight:500}
.dw-link:hover{text-decoration:underline}
.dw-sr{margin:0 16px 10px}
.dw-sr input{width:100%;height:34px;border:1px solid #e1dacd;border-radius:8px;padding:0 10px;font:inherit;font-size:13px;background:#fff}
.dw-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 8px}
.dw-tabs span{font-size:12.5px;padding:4px 10px;border-radius:20px;background:#f0ebe2;color:#6b6155;cursor:pointer;user-select:none}
.dw-tabs span i{font-style:normal;opacity:.55;margin-inline-start:5px;font-size:11px}
.dw-tabs span:hover{background:#e8e1d5}
.dw-tabs span.on{background:#2d2b26;color:#f6f1e8}
.dw-sub{display:flex;flex-wrap:wrap;gap:4px 14px;padding:2px 16px 8px;font-size:12.5px;color:#9a8f80}
.dw-sub span{cursor:pointer;padding-bottom:3px;border-bottom:1.5px solid transparent}
.dw-sub span.on{color:#2d2b26;border-bottom-color:var(--accent)}
.dw-grid{flex:1;min-height:0;overflow:auto;padding:12px 16px 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px 9px;align-content:start;border-top:1px solid #eee7dc}
.dw-tl{position:relative;cursor:grab;user-select:none}
.dw-im{position:relative;aspect-ratio:3/4;border-radius:5px;overflow:hidden;background:#ece6dc;outline:2px solid transparent;outline-offset:2px;transition:outline-color .15s}
.dw-tl.clear .dw-im{background:#f4f1ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect width='6' height='6' fill='%23ebe6de'/%3E%3Crect x='6' y='6' width='6' height='6' fill='%23ebe6de'/%3E%3C/svg%3E")}
.dw-im img,.dw-im video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s;pointer-events:none}
.dw-tl.clear .dw-im img{object-fit:contain;padding:6px;box-sizing:border-box}
.dw-im img.ok,.dw-im video{opacity:1}
.dw-play{position:absolute;z-index:1;bottom:5px;left:5px;font-size:9px;color:#fff;background:rgba(0,0,0,.55);border-radius:10px;padding:2px 6px}
.dw-tl:hover .dw-im{outline-color:#cdb99a}
.dw-tl.sel .dw-im{outline-color:var(--accent)}
.dw-tl.sel::before{content:"✓";position:absolute;z-index:2;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;display:grid;place-items:center}
.dw-tl.dragging .dw-im{opacity:.35;outline:1.5px dashed var(--accent)}
.dw-tl.used .dw-im::after{content:"✓ בספר";position:absolute;top:5px;left:5px;background:rgba(45,43,38,.78);color:#fff;font-size:10px;border-radius:10px;padding:1px 7px 2px}
.dw-tl.bad .dw-im::before{content:"?";position:absolute;inset:0;display:grid;place-items:center;color:#b3a998;font-size:20px}
.dw-n{font-size:10.5px;color:#9a8f80;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.dw-ft{padding:9px 16px 12px;font-size:11.5px;color:#9a8f80;border-top:1px solid #eee7dc;text-align:center;line-height:1.5}
.dw-none{grid-column:1/-1;text-align:center;color:#9a8f80;font-size:13px;margin:30px 0}
.dw-empty{padding:30px 22px;text-align:center;color:#6f6558;font-size:13.5px;line-height:1.65}
.dw-empty>svg{width:46px;height:46px;fill:none;stroke:#b8a78c;stroke-width:1.2;margin-bottom:6px}
.dw-empty h4{font-size:16px;color:#2d2b26;margin:4px 0 8px;font-weight:600}
.dw-empty .eb{margin:14px auto 6px}
.dw-or{font-size:12px;color:#a59b8d;margin:4px 0 14px}
.dw-warn{background:#f7ecdc;color:#8a5a22;border-radius:8px;padding:8px 10px;font-size:12.5px}
.dw-spin{width:26px;height:26px;margin:10px auto;border:2px solid #e3dccf;border-top-color:var(--accent);border-radius:50%;animation:dwspin .8s linear infinite}
@keyframes dwspin{to{transform:rotate(360deg)}}
body.dw-dragging #ed-canvas .ed-page{outline:1px dashed rgba(138,111,78,.35)}

/* ---------- embedded services ---------- */
.fe-embed{background:transparent}
.emb-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:repeating-linear-gradient(135deg,#f3efe7 0 10px,#efe9df 10px 20px);border:1px solid #ddd5c6;color:#6f6558;font-family:var(--sans);text-align:center}
.emb-ph svg{width:30px;height:30px;fill:none;stroke:#a08a6a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.emb-ph b{font-size:15px;font-weight:600;color:#2d2b26}
.emb-ph span{font-size:11.5px;opacity:.75}

/* ---------- small page arrows ---------- */
.fe-arrow{display:flex;align-items:center;justify-content:center;container-type:size}
.fe-arrow .ar-b{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8%;width:100%;height:100%;color:var(--ac);transition:transform .35s cubic-bezier(.2,.7,.2,1),background .3s,color .3s}
.fe-arrow svg{height:46%;aspect-ratio:1;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.fe-arrow.ar-l svg{transform:scaleX(-1)}
.ar-circle .ar-b{border:1px solid var(--ac);border-radius:50%;width:auto;aspect-ratio:1}
.ar-circle .ar-b:hover{background:var(--ac);color:#fff}
.ar-chevron svg{height:70%}
.ar-line svg{height:auto;width:100%;aspect-ratio:40/24;stroke-width:1.1}
.ar-r .ar-b:hover svg{transform:translateX(12%)}
.ar-l .ar-b:hover svg{transform:scaleX(-1) translateX(12%)}
.ar-pill .ar-b{border:1px solid var(--ac);border-radius:999px;padding:0 9%;font-family:var(--sans);letter-spacing:.06em;white-space:nowrap}
.ar-pill.ar-l .ar-b{flex-direction:row-reverse}
.ar-pill svg{height:40%}
.ar-pill .ar-b:hover{background:var(--ac);color:#fff}

/* ---------- social icons ---------- */
.fe-social{display:flex;align-items:center;gap:var(--sgap);container-type:size}
.so-i{display:grid;place-items:center;height:100cqh;aspect-ratio:1;color:var(--sc);border-radius:50%;transition:transform .35s cubic-bezier(.2,.7,.2,1),background .3s,color .3s,opacity .3s;flex:none;text-decoration:none}
.so-i svg{width:50%;height:50%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.so-i svg .f{fill:currentColor;stroke:none}
.set-brand .so-i svg{width:46%;height:46%}
.so-circle .so-i{border:1px solid var(--sc)}
.so-circle .so-i:hover{background:var(--sc);color:var(--sbg)}
.so-square .so-i{border:1px solid var(--sc);border-radius:22%}
.so-square .so-i:hover{background:var(--sc);color:var(--sbg)}
.so-solid .so-i{background:var(--sc);color:var(--sbg)}
.so-solid .so-i:hover{transform:translateY(-8%)}
.so-plain .so-i svg{width:76%;height:76%}
.so-plain.set-brand .so-i svg{width:68%;height:68%}
.so-plain .so-i:hover{transform:translateY(-8%);opacity:.7}
/* names in letters – quiet and luxurious */
.set-type{gap:calc(var(--sgap) * 1.4);white-space:nowrap}
.set-type .so-i{height:auto;aspect-ratio:auto;border:0!important;background:none!important;border-radius:0;font-family:var(--sans);font-size:var(--sfs);letter-spacing:.22em;text-transform:uppercase;color:var(--sc);padding:.3em 0;position:relative}
.set-type .so-i::after{content:"";position:absolute;left:0;right:.22em;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.set-type .so-i:hover::after{transform:scaleX(1)}
.so-dot{width:3px;height:3px;border-radius:50%;background:var(--sc);opacity:.45;flex:none}

/* ---------- contact form ---------- */
.fe-form{font-family:var(--sans);font-size:var(--fs);color:var(--fc)}
.fe-form .ff{position:absolute;inset:0;display:flex;flex-direction:column;gap:.9em;transition:opacity .5s}
.ff-t{font-family:'Frank Ruhl Libre','Cormorant Garamond',serif;font-size:1.7em;font-weight:300;line-height:1.15;margin-bottom:.2em}
.ff-f{display:flex;flex-direction:column;gap:.25em}
.ff-f span{font-size:.72em;letter-spacing:.14em;opacity:.7}
.ff-f input,.ff-f textarea{font:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid currentColor;border-radius:0;padding:.35em 0;outline:none;resize:none;opacity:.9;width:100%}
.ff-f textarea{height:3.6em}
.ff-f input:focus,.ff-f textarea:focus{border-bottom-width:2px;opacity:1}
.ff-f input:disabled,.ff-f textarea:disabled{opacity:.55}
.ff-err input,.ff-err textarea{border-bottom-color:#b0563a}
.ff-b{all:unset;align-self:flex-start;cursor:pointer;margin-top:.4em;padding:.75em 2.2em;border-radius:999px;background:var(--fc);color:#fff;font-size:.9em;letter-spacing:.1em;transition:opacity .3s,transform .3s}
.ff-dark .ff-b{color:#1d1a16}
.ff-b:hover{transform:translateY(-2px)}
.ff-b.busy{opacity:.5}
.ff-ok{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-family:'Frank Ruhl Libre',serif;font-size:1.5em;font-weight:300;opacity:0;pointer-events:none;transition:opacity .6s .2s}
.fe-form.sent .ff{opacity:0;pointer-events:none}
.fe-form.sent .ff-ok{opacity:1}

/* ---------- typewriter ---------- */
.fx-type{--fx-n:fxFade;--fx-t:.2s}
.tw-caret{display:inline-block;width:.06em;min-width:1px;height:1em;margin-inline:.04em;vertical-align:-.12em;background:currentColor;animation:twBlink .9s steps(1) infinite}
@keyframes twBlink{50%{opacity:0}}

/* ---------- before / after ---------- */
.fe-compare{overflow:hidden;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.fe-compare .cmp-a,.fe-compare .cmp-b{position:absolute;inset:0}
.fe-compare .cmp-b{clip-path:inset(0 0 0 var(--cp,50%))}
.fe-compare img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmp-empty{position:absolute;inset:0;display:grid;place-items:center;background:#e9e3d8}
.cmp-b .cmp-empty{background:#ddd5c6}
.cmp-empty svg{width:22%;max-width:60px;fill:none;stroke:#a89a83;stroke-width:1.2}
.cmp-h{position:absolute;top:0;bottom:0;left:var(--cp,50%);width:0;pointer-events:none}
.cmp-h i{position:absolute;top:0;bottom:0;left:-.5px;width:1px;background:var(--cc);box-shadow:0 0 6px rgba(0,0,0,.25)}
.cmp-h span{position:absolute;top:50%;left:0;width:calc(var(--pw) * .075);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--cc);background:rgba(255,255,255,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:transform .3s}
.cmp-h svg{width:55%;fill:none;stroke:var(--cc);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fe-compare.dragging .cmp-h span{transform:translate(-50%,-50%) scale(1.12)}
.cmp-l{position:absolute;top:4%;font:500 var(--lfs)/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--cc);text-shadow:0 1px 6px rgba(0,0,0,.35);pointer-events:none;transition:opacity .3s}
.cmp-la{left:4%}.cmp-lb{right:4%}

/* ---------- countdown ---------- */
.fe-countdown{display:flex;align-items:center;justify-content:center;gap:calc(var(--cfs) * .55)}
.cd-u{display:flex;flex-direction:column;align-items:center;min-width:calc(var(--cfs) * 1.3)}
.cd-u b{font-size:var(--cfs);font-weight:300;line-height:1;font-variant-numeric:lining-nums tabular-nums}
.cd-u span{font-family:var(--sans);font-size:calc(var(--cfs) * .2);letter-spacing:.24em;text-transform:uppercase;opacity:.65;margin-top:.7em}
.cd-line .cd-u+.cd-u{border-inline-start:1px solid currentColor;padding-inline-start:calc(var(--cfs) * .55);border-color:color-mix(in srgb,currentColor 35%,transparent)}
.cd-boxes .cd-u{border:1px solid color-mix(in srgb,currentColor 40%,transparent);padding:calc(var(--cfs) * .32) calc(var(--cfs) * .25) calc(var(--cfs) * .24)}
.cd-minimal .cd-u span{font-size:calc(var(--cfs) * .17)}
.cd-end{display:none;font-size:calc(var(--cfs) * .6);font-weight:300}
.fe-countdown.ended .cd-u{display:none}
.fe-countdown.ended .cd-end{display:block}

/* ---------- a floor plan that draws itself ---------- */
.fe-plan{background:var(--pp);overflow:hidden}
.pl-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:opacity 1.2s ease}
.pl-wall{fill:none;stroke:var(--pi);stroke-width:7;stroke-linecap:square;stroke-dasharray:1;stroke-dashoffset:1}
.pl-wall.outer{stroke-width:12}
.go .pl-wall{stroke-dashoffset:0;transition:stroke-dashoffset var(--t,1s) cubic-bezier(.45,.05,.3,1) var(--d,0s)}
.pl-cut{fill:none;stroke:var(--pp);stroke-width:16;opacity:0}
.pl-win{fill:none;stroke:var(--pi);stroke-width:2.2;opacity:0}
.pl-door{fill:none;stroke:var(--pi);stroke-width:2.2;opacity:0}
.pl-f{fill:none;stroke:var(--pi);stroke-width:2.6;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.94)}
.pl-f.dash{stroke-dasharray:10 9;stroke-width:2}
.pl-name{font-family:var(--sans,Assistant),sans-serif;font-size:30px;font-weight:600;letter-spacing:.06em;fill:var(--pi);text-anchor:middle;direction:rtl;opacity:0;paint-order:stroke;stroke:var(--pp);stroke-width:8px;stroke-linejoin:round}
.pl-area{font-family:var(--sans,Assistant),sans-serif;font-size:24px;letter-spacing:.04em;fill:var(--pa);text-anchor:middle;direction:rtl;opacity:0;paint-order:stroke;stroke:var(--pp);stroke-width:8px}
.pl-dim{fill:none;stroke:var(--pi);stroke-width:1.8;opacity:0}
.pl-dimt{font-family:'Cormorant Garamond',serif;font-size:26px;fill:var(--pi);text-anchor:middle;opacity:0}
.pl-north{opacity:0}
.pl-north circle{fill:none;stroke:var(--pi);stroke-width:2}
.pl-north path{fill:var(--pa)}
.pl-north text{font:500 24px 'Cormorant Garamond',serif;fill:var(--pi);text-anchor:middle}
.go .pl-cut,.go .pl-win,.go .pl-door,.go .pl-dim,.go .pl-dimt,.go .pl-north{opacity:1;transition:opacity .8s ease var(--d,0s)}
.go .pl-f{opacity:1;transform:none;transition:opacity .9s ease var(--d,0s),transform 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.go .pl-name,.go .pl-area{opacity:1;transition:opacity .9s ease var(--d,0s)}
.static *{transition:none!important}
.pl-room{fill:var(--pa);fill-opacity:0;transition:fill-opacity .4s}
.pl-room.link{cursor:pointer}
.go .pl-room.link:hover{fill-opacity:.12}
.pl-render{opacity:0;transition:opacity 1.3s ease;pointer-events:none}
.show-render .pl-render{opacity:1}
.pl-walls,.pl-open,.pl-furn{transition:opacity 1.1s ease}
.show-render .pl-walls,.show-render .pl-open,.show-render .pl-furn{opacity:0}
.show-render .pl-name{stroke:rgba(246,243,238,.85)}
.pl-switch{position:absolute;bottom:3%;left:50%;transform:translateX(-50%);display:flex;padding:.25em;border-radius:999px;background:rgba(246,243,238,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(0,0,0,.08);z-index:2;font-family:var(--sans,Assistant),sans-serif;opacity:0;transition:opacity .8s ease var(--pt,4s)}
.go .pl-switch,.static .pl-switch{opacity:1}
.pl-switch button{all:unset;cursor:pointer;padding:.45em 1.3em;border-radius:999px;letter-spacing:.12em;color:var(--pi);transition:background .35s,color .35s;position:relative;z-index:1}
.pl-switch button.on{background:var(--pi);color:var(--pp)}
/* drawer: my folder / free libraries */
.dw-mode{display:flex;margin:0 16px 12px;background:#efe9df;border-radius:9px;padding:3px}
.dw-mode span{flex:1;text-align:center;font-size:12.5px;padding:6px 4px;border-radius:7px;color:#7a6f61;cursor:pointer;user-select:none;transition:background .15s,color .15s}
.dw-mode span:hover{color:#2d2b26}
.dw-mode span.on{background:#fff;color:#2d2b26;font-weight:600;box-shadow:0 1px 3px rgba(60,40,20,.12)}
.dw-sep{width:1px;align-self:stretch;background:#e1dacd;margin:2px 2px}
.dw-tr{padding:0 16px;font-size:11.5px;color:#9a8f80;min-height:0}
.dw-tr:not(:empty){padding-bottom:8px}
.dw-tr b{color:#6f6558;font-weight:500}
.dw-stock .dw-st .dw-spin{display:block}
.dw-keys{text-align:start}
.dw-keys>svg,.dw-keys h4,.dw-keys>p:first-of-type{text-align:center;display:block;margin-inline:auto}
.dw-keys label{display:flex;gap:6px;align-items:baseline;font-size:12.5px;font-weight:600;color:#2d2b26;margin:14px 0 5px}
.dw-keys label span{font-weight:400;color:#a59b8d}
.dw-keys label a{margin-inline-start:auto;font-weight:500;color:var(--accent);text-decoration:none;font-size:12px}
.dw-keys label a:hover{text-decoration:underline}
.dw-keys input{width:100%;box-sizing:border-box;height:36px;border:1px solid #e1dacd;border-radius:8px;padding:0 10px;font:13px ui-monospace,Menlo,monospace;background:#fff;color:#2d2b26}
.dw-keys input:focus{outline:none;border-color:#cdb99a}
.dw-keys .eb{display:flex;margin:18px auto 8px}
.dw-keys .dw-link{display:block;margin:0 auto}
.dw-keys .dw-warn{margin-top:12px}
.dw-opts{gap:4px 10px;flex-wrap:nowrap;white-space:nowrap}
.dw-unk{display:block;color:#a4743a;margin-top:3px}

/* ---------- notebook (book.object = 'notebook') ---------- */
/* rounded page corners (any book): --rcf = radius as a fraction of the page width */
:root{--rcf:0}
body{--rc:calc(var(--pw) * var(--rcf))}
body.nb{--nb-r:max(var(--rc),2px)}
body.rc .page.side-r{border-radius:0 var(--rc) var(--rc) 0}
body.rc .page.side-l{border-radius:var(--rc) 0 0 var(--rc)}
body.rc.portrait .page{border-radius:0 var(--rc) var(--rc) 0}
body.rc:not(.nb) #book-shadow{border-radius:var(--rc)}
body.nb .page{background:var(--nb-paper)}
body.nb .page.nb-cover{background:var(--nb-c)}
body.nb .nb-cover .page-shade{background:none}
/* the gutter: sewn pages curve down into the spine */
body.nb-sewn .side-l:not(.nb-cover) .page-shade{background:linear-gradient(to left,rgba(40,30,15,.24) 0,rgba(40,30,15,.10) 2.2%,rgba(40,30,15,.03) 6%,rgba(0,0,0,0) 12%,rgba(0,0,0,0) 97%,rgba(0,0,0,.05) 100%)}
body.nb-sewn .side-r:not(.nb-cover) .page-shade{background:linear-gradient(to right,rgba(40,30,15,.22) 0,rgba(40,30,15,.09) 2.2%,rgba(40,30,15,.03) 6%,rgba(0,0,0,0) 12%,rgba(0,0,0,0) 97%,rgba(0,0,0,.05) 100%)}
body.nb-spiral .side-l:not(.nb-cover) .page-shade{background:linear-gradient(to left,rgba(0,0,0,.10) 0,rgba(0,0,0,0) 4%)}
body.nb-spiral .side-r:not(.nb-cover) .page-shade{background:linear-gradient(to right,rgba(0,0,0,.10) 0,rgba(0,0,0,0) 4%)}
body.nb.portrait .page-shade{background:none!important}

/* paper: a whisper of grain, and the ruling */
.nb-paper{position:absolute;inset:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27256%27%20height%3D%27256%27%3E%3Cfilter%20id%3D%27g%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.8%27%20numOctaves%3D%273%27%20seed%3D%272%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%20.40%200%200%200%200%20.33%200%200%200%200%20.22%200%200%200%20.16%20-.03%27/%3E%3C/filter%3E%3Crect%20width%3D%27256%27%20height%3D%27256%27%20filter%3D%27url%28%23g%29%27/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27512%27%20height%3D%27512%27%3E%3Cfilter%20id%3D%27c%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.01%27%20numOctaves%3D%274%27%20seed%3D%274%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%20.5%200%200%200%200%20.42%200%200%200%200%20.28%200%200%200%20.19%20-.06%27/%3E%3C/filter%3E%3Crect%20width%3D%27512%27%20height%3D%27512%27%20filter%3D%27url%28%23c%29%27/%3E%3C/svg%3E"),
    radial-gradient(130% 110% at 50% 50%,rgba(0,0,0,0) 58%,rgba(110,85,50,.07) 100%)}
.nb-rule{position:absolute;pointer-events:none;--s:calc(var(--pw) * .046);--ink:rgba(74,86,108,.24)}
.nb-rule.nb-lines{top:11%;bottom:4.5%;left:0;right:0;--ink:rgba(74,86,108,.48);
  background:repeating-linear-gradient(to bottom,transparent 0 calc(var(--s) - 1px),var(--ink) calc(var(--s) - 1px) var(--s))}
.nb-rule.nb-dots{top:4.2%;bottom:4.2%;left:5%;right:5%;--ink:rgba(74,86,108,.84);
  background:radial-gradient(circle at center,var(--ink) 0 calc(var(--pw) * .0026),transparent calc(var(--pw) * .0026 + .6px)) center/var(--s) var(--s)}
.nb-rule.nb-grid{top:4.2%;bottom:4.2%;left:5%;right:5%;--ink:rgba(74,86,108,.32);
  background:linear-gradient(var(--ink) 1px,transparent 1px) center/var(--s) var(--s),linear-gradient(90deg,var(--ink) 1px,transparent 1px) center/var(--s) var(--s)}
.side-l .nb-rule.nb-dots,.side-l .nb-rule.nb-grid{right:7%}
.side-r .nb-rule.nb-dots,.side-r .nb-rule.nb-grid{left:7%}
.nb-spiral .side-l .nb-rule{right:9%!important}
.nb-spiral .side-r .nb-rule{left:9%!important}
/* Wire-O holes punched along the spine edge */
.nb-holes{position:absolute;top:0;bottom:0;width:calc(var(--nb-hx) * 2);pointer-events:none;
  background:radial-gradient(ellipse calc(var(--nb-cell) * .2) calc(var(--nb-cell) * .27) at 50% 50%,rgba(30,25,18,.62) 0 70%,rgba(30,25,18,.18) 82%,transparent 100%) 50% 0/100% calc(100% / var(--nb-n)) repeat-y}
.side-l .nb-holes{right:0}
.side-r .nb-holes{left:0}
body.portrait .nb-holes{left:0;right:auto}

/* cover material */
.nb-mat{position:absolute;inset:0;pointer-events:none;background-color:var(--nb-c);background-blend-mode:soft-light}
.nb-mat.nb-matte{background-blend-mode:overlay}
.nb-mat::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(128deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.14) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 0 calc(var(--pw) * .018) rgba(0,0,0,.28)}
.nb-mat.nb-light::after{background:linear-gradient(128deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.05) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.08) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 0 calc(var(--pw) * .018) rgba(0,0,0,.14)}
/* the hinge of a hard cover: a soft groove along the spine */
.nb-hinge{position:absolute;top:0;bottom:0;left:4.2%;width:2.2%;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.22) 40%,rgba(255,255,255,.07) 70%,rgba(0,0,0,0))}
.side-l .nb-hinge{left:auto;right:4.2%;transform:scaleX(-1)}
/* name on the cover */
.nb-title{position:absolute;left:12%;right:12%;display:flex;justify-content:center;text-align:center;pointer-events:none;
  font-family:var(--serif);font-weight:500;font-size:calc(var(--pw) * .068);letter-spacing:.14em;line-height:1.15;text-transform:none}
.nb-title.nb-he{font-family:var(--sans);font-weight:300;letter-spacing:.06em;font-size:calc(var(--pw) * .06)}
.nb-tp-center{top:42%}
.nb-tp-top{top:17%}
.nb-tp-bottom{bottom:11%;font-size:calc(var(--pw) * .048)}
.nb-t-deboss span{color:rgba(0,0,0,.34);text-shadow:0 1px 0 rgba(255,255,255,.14),0 -1px 0 rgba(0,0,0,.35)}
.nb-light .nb-t-deboss span,.nb-cover-in .nb-mat.nb-light~.nb-t-deboss span{color:rgba(0,0,0,.24);text-shadow:0 1px 0 rgba(255,255,255,.45),0 -1px 0 rgba(0,0,0,.18)}
.nb-t-gold span,.nb-t-silver span{-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))}
.nb-t-gold span{background-image:linear-gradient(170deg,#f8e7b0 0%,#c79d48 38%,#f3d98f 55%,#a87d33 80%,#e7c877 100%)}
.nb-t-silver span{background-image:linear-gradient(170deg,#ffffff 0%,#a9acb1 38%,#f2f3f5 55%,#8d9096 80%,#dcdee2 100%)}
.nb-t-ink span{color:rgba(0,0,0,.72)}
.nb-mat:not(.nb-light)~.nb-t-ink span{color:rgba(255,255,255,.86)}

/* the cover boards around the paper (fade only – they never jump) */
body.nb #book-shadow{display:none}
.nb-board{position:absolute;pointer-events:none;background-blend-mode:soft-light;opacity:1;transition:opacity .32s ease;
  box-shadow:0 28px 46px -12px rgba(40,30,15,.36),0 6px 14px rgba(40,30,15,.15),inset 0 0 0 1px rgba(255,255,255,.05),inset 0 0 6px rgba(0,0,0,.32)}
#nb-board-l{border-radius:calc(var(--nb-r) * 1.25) 1px 1px calc(var(--nb-r) * 1.25)}
#nb-board-r{border-radius:1px calc(var(--nb-r) * 1.25) calc(var(--nb-r) * 1.25) 1px}
.nb-board.off,#nb-stack-l.off,#nb-stack-r.off{opacity:0!important}
/* page-flip draws a big flat shadow beside a hard page – the boards give the depth instead */
body.nb .stf__hardShadow,body.nb .stf__hardInnerShadow{display:none!important}
/* elastic band, printed on the cover page so it turns with it */
.nb-band-in{position:absolute;top:0;bottom:0;width:3%;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 1px,rgba(255,255,255,.03) 1px 3px),
    linear-gradient(90deg,rgba(0,0,0,.42),rgba(255,255,255,.14) 30%,rgba(255,255,255,.04) 55%,rgba(0,0,0,.45)),var(--nb-band);
  box-shadow:2px 0 5px rgba(0,0,0,.35),-1px 0 2px rgba(0,0,0,.2)}
.side-r .nb-band-in{right:7%}
.side-l .nb-band-in{left:7%}
body.portrait .nb-band-in{left:auto;right:7%}
/* edges of the paper block peeking out beside the open pages */
#nb-stack-l,#nb-stack-r{position:absolute;pointer-events:none;transition:opacity .32s ease;
  background:repeating-linear-gradient(90deg,rgba(90,75,50,.16) 0 1px,transparent 1px 2.2px),var(--nb-paper);box-shadow:0 1px 2px rgba(0,0,0,.18)}
#nb-stack-l{border-radius:var(--nb-r) 0 0 var(--nb-r)}
#nb-stack-r{border-radius:0 var(--nb-r) var(--nb-r) 0}
/* ribbon bookmark */
#nb-ribbon{position:absolute;pointer-events:none;transform-origin:50% 0;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));transition:opacity .32s ease}
#nb-ribbon.off{opacity:0}
#nb-ribbon svg{display:block;width:100%;height:100%}
/* Wire-O */
#nb-rings{position:absolute;pointer-events:none;z-index:4}
#nb-rings svg{display:block;overflow:visible}
body.nb.zoomed #nb-rings{transition:none}

/* notebook in the editor canvas */
.ed-page.nb-ed.side-r,.ed-page.rc-ed.side-r{border-radius:0 var(--nb-r) var(--nb-r) 0}
.ed-page.nb-ed.side-l,.ed-page.rc-ed.side-l{border-radius:var(--nb-r) 0 0 var(--nb-r)}
.ed-page.rc-ed>img.bg{border-radius:inherit}
.ed-page.nb-ed .nb-mat,.ed-page.nb-ed .nb-paper{border-radius:inherit}
.ed-page.nb-ed .nb-holes{z-index:0}
.nb-ed-note{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);border:0;cursor:pointer;font:500 12.5px var(--sans);direction:rtl;white-space:nowrap;
  padding:7px 14px;border-radius:20px;background:rgba(255,255,255,.88);color:#333;box-shadow:0 2px 10px rgba(0,0,0,.2);transition:background .2s}
.nb-ed-note:hover{background:#fff}

/* notebook design dialog */
.ed-modal .box.nb-box{width:min(980px,96vw);max-height:94vh;overflow:auto;padding:22px 26px}
.nb-dlg{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:26px;align-items:start}
.nb-opts h3{margin:14px 0 7px;font-size:13px;font-weight:600;color:#333}
.nb-opts h3:first-child{margin-top:0}
.nb-opts .seg{display:flex;flex-wrap:wrap;margin-bottom:8px}
.nb-opts .seg button{padding:6px 11px;font-size:13px}
.nb-opts input[type=text]{width:100%;margin-bottom:8px;padding:8px 10px;border:1px solid #ddd6c8;border-radius:8px;font:inherit}
.nb-opts .chk{display:flex;align-items:center;gap:6px;font-size:13.5px;margin:6px 0}
.nb-opts .chk .hint{font-size:12px;color:#8a8576}
.nb-sw{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 8px;align-items:center}
.nb-sw button{width:26px;height:26px;border-radius:50%;border:0;cursor:pointer;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);transition:transform .15s}
.nb-sw button:hover{transform:scale(1.1)}
.nb-sw button.on{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 0 0 2px #fff,0 0 0 3.5px #2f7bf6}
.nb-sw-own{width:26px;height:26px;border-radius:50%;overflow:hidden;position:relative;cursor:pointer;
  background:conic-gradient(#e66,#ec6,#6c6,#6ce,#66e,#c6e,#e66);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.nb-sw-own input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.nb-line{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nb-line input[type=color]{width:34px;height:24px;border:1px solid #ddd6c8;border-radius:6px;padding:0;background:none;cursor:pointer}
.nb-even{background:#f7f3ea;border-radius:8px;padding:8px 10px;align-items:flex-start!important}
.nb-prev{position:sticky;top:0;display:flex;flex-direction:column;align-items:center;gap:26px;padding:26px 10px 10px;border-radius:14px;
  background:radial-gradient(120% 90% at 50% 40%,#f6f2ea 0%,#e9e3d8 100%)}
.nb-prev .hint{font-size:12px;color:#8a8576;text-align:center;margin:0}
.nb-pv{display:flex;justify-content:center;padding:6px 20px 30px}
.nb-pwrap{position:relative}
.nb-pcase{position:absolute;border-radius:calc(var(--pw) * .04);background-blend-mode:soft-light;
  box-shadow:0 16px 26px -10px rgba(40,30,15,.4),0 4px 8px rgba(40,30,15,.14),inset 0 0 4px rgba(0,0,0,.3)}
.nb-pp{position:absolute;top:0;left:0;overflow:hidden;background:var(--nb-paper)}
.nb-pp.side-r{border-radius:0 calc(var(--pw) * .03) calc(var(--pw) * .03) 0}
.nb-pp.side-l{border-radius:calc(var(--pw) * .03) 0 0 calc(var(--pw) * .03)}
.nb-pp .page-els{position:absolute;inset:0}
.nb-pp .nb-mat{border-radius:inherit}
.nb-pv-open .nb-pp.side-l::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to left,rgba(40,30,15,.22) 0,rgba(40,30,15,.08) 3%,rgba(0,0,0,0) 12%)}
.nb-pv-open .nb-pp.side-r::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,rgba(40,30,15,.2) 0,rgba(40,30,15,.07) 3%,rgba(0,0,0,0) 12%)}
.nb-pv-open.nb-spiral .nb-pp::after{opacity:.35}
.nb-pv .nb-pp.nb-cover-in::after{display:none}
.nb-pwire{position:absolute;top:0;z-index:3;pointer-events:none}
.nb-pwire svg{display:block;overflow:visible}
.nb-pband{position:absolute;z-index:3;border-radius:2px;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 1px,rgba(255,255,255,.03) 1px 3px),linear-gradient(90deg,rgba(0,0,0,.42),rgba(255,255,255,.14) 30%,rgba(255,255,255,.04) 55%,rgba(0,0,0,.45)),var(--nb-band);
  box-shadow:1px 0 3px rgba(0,0,0,.35)}
.nb-pribbon{position:absolute;background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(255,255,255,.2) 35%,rgba(0,0,0,.25)),var(--nb-ribbon);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%);filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
@media (max-width:760px){.nb-dlg{grid-template-columns:1fr}.nb-prev{position:static;order:-1}}
.nb-dk .nb-rule{--ink:rgba(255,255,255,.4)!important}
.nb-dk .nb-paper{opacity:.2}

/* thin paper: the other side shows through, mirrored */
.nb-through{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.05;transform:scaleX(-1);filter:grayscale(.6) blur(.8px)}
.nb-through .mini-page{position:absolute!important;inset:0}
.nb-dk .nb-through{display:none}
/* page curve: the paper rises from the spine and catches the light, then settles */
body.nb-sewn .side-l:not(.nb-cover) .page-shade{background:linear-gradient(to left,rgba(40,30,15,.26) 0,rgba(40,30,15,.11) 2%,rgba(40,30,15,.035) 5.5%,rgba(255,252,244,.13) 10%,rgba(255,252,244,0) 17%,rgba(0,0,0,0) 94%,rgba(60,45,25,.06) 100%)}
body.nb-sewn .side-r:not(.nb-cover) .page-shade{background:linear-gradient(to right,rgba(40,30,15,.24) 0,rgba(40,30,15,.10) 2%,rgba(40,30,15,.03) 5.5%,rgba(255,252,244,.13) 10%,rgba(255,252,244,0) 17%,rgba(0,0,0,0) 94%,rgba(60,45,25,.06) 100%)}
/* notebook details */
.nb-num{position:absolute;bottom:3.2%;font:400 calc(var(--pw) * .021)/1 var(--serif);color:rgba(70,62,50,.55);letter-spacing:.05em;pointer-events:none;z-index:1}
.side-r .nb-num{right:6.5%}
.side-l .nb-num{left:6.5%}
body.portrait .nb-num{left:auto;right:6.5%}
.nb-margin{position:absolute;top:0;bottom:0;left:13%;width:1px;pointer-events:none;background:rgba(206,92,84,.42);box-shadow:3px 0 0 rgba(206,92,84,.16)}
.nb-margin.nb-rtl{left:auto;right:13%;box-shadow:-3px 0 0 rgba(206,92,84,.16)}
.nb-date{position:absolute;top:5%;right:7%;display:flex;align-items:flex-end;gap:.6em;pointer-events:none;
  font:400 calc(var(--pw) * .02)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(70,80,100,.5)}
.nb-date i{display:block;width:calc(var(--pw) * .2);border-bottom:1px solid rgba(70,80,100,.32)}
.nb-date.nb-rtl{right:auto;left:7%;direction:rtl;letter-spacing:.04em}
.side-l .nb-date:not(.nb-rtl){right:auto;left:7%}
.side-r .nb-date.nb-rtl{left:auto;right:7%}
/* sewing thread in the middle of a signature */
#nb-stitch{position:absolute;pointer-events:none;z-index:3;opacity:0;transition:opacity .35s ease}
#nb-stitch.on{opacity:1}
body.nb-moving #nb-stitch{opacity:0;transition:opacity .12s ease}
#nb-stitch svg{display:block}
.nb-box>.btn-row{position:sticky;bottom:-22px;background:#fff;margin:14px -26px -22px;padding:12px 26px 16px;border-top:1px solid #efe9de;z-index:2}

/* ---------- reading view ---------- */
#reading{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--bg);opacity:0;transition:opacity .25s ease}
#reading.in{opacity:1}
body.reading #app{visibility:hidden}
.rd-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;
  background:rgba(251,248,242,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(60,50,30,.08);z-index:2}
.rd-info{display:flex;align-items:baseline;gap:12px;min-width:0}
.rd-title{font:500 17px var(--serif);letter-spacing:.02em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-pg{font-size:13px;color:var(--muted);letter-spacing:.06em;white-space:nowrap}
.rd-tools{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.rd-zv{font-size:12.5px;color:var(--muted);min-width:42px;text-align:center}
.rd-back{display:flex;align-items:center;gap:6px;margin-inline-start:10px;border:0;border-radius:20px;padding:8px 14px;cursor:pointer;
  background:var(--ink);color:#fff;font:500 13.5px var(--sans)}
.rd-back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.rd-scroll{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.rd-col{display:flex;flex-direction:column;align-items:center;gap:28px;padding:28px 0 60px;min-width:min-content}
.rd-page{position:relative;flex:0 0 auto;box-shadow:0 14px 34px -14px rgba(40,30,15,.35),0 2px 6px rgba(40,30,15,.08);border-radius:calc(var(--pw) * var(--rcf))}
.rd-page>.page{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.rd-page .page-shade{display:none}
.rd-n{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:11.5px;color:var(--muted);letter-spacing:.08em}
@media (max-width:700px){.rd-col{gap:16px;padding:12px 0 40px}.rd-title{display:none}.rd-zv{display:none}.rd-back{padding:7px 11px}}

/* ---------- thin card notebook (nb.thin – kraft style) ---------- */
body.nb.nb-thin #book-shadow{display:block;border-radius:var(--rc);background:var(--nb-paper);
  box-shadow:0 22px 38px -10px rgba(60,42,20,.30),0 4px 10px rgba(60,42,20,.12)}
/* fold line of a soft cover along the spine */
.nb-crease{position:absolute;top:0;bottom:0;left:1.6%;width:1.4%;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.10),rgba(255,255,255,.10) 45%,rgba(0,0,0,.06) 70%,rgba(0,0,0,0))}
.side-l .nb-crease{left:auto;right:1.6%;transform:scaleX(-1)}
/* saddle stitching: long thread stitches along the spine */
.nb-cstitch{position:absolute;top:4%;bottom:4%;left:3.6%;width:max(2px,calc(var(--pw) * .0045));pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 calc(var(--pw) * .028),rgba(240,232,214,.88) calc(var(--pw) * .028) calc(var(--pw) * .1));
  filter:drop-shadow(.5px .8px 0 rgba(60,40,15,.35));border-radius:2px}
.side-l .nb-cstitch{left:auto;right:3.6%}
body.portrait .nb-cstitch{left:3.6%;right:auto}
.nb-mat.nb-inside{filter:brightness(1.05) saturate(.92)}
.nb-mat.nb-inside::after{background:none;box-shadow:inset 0 0 calc(var(--pw) * .02) rgba(60,40,15,.12)}
/* printed label on the cover */
.nb-t-label span{display:inline-block;padding:.55em 1.5em .5em;background:#f6efe1;color:#33281b;
  font-size:.62em;letter-spacing:.26em;text-transform:uppercase;font-weight:500;
  box-shadow:inset 0 0 0 1px rgba(60,40,20,.38),inset 0 0 0 4px #f6efe1,inset 0 0 0 5px rgba(60,40,20,.22),0 1px 2px rgba(60,40,20,.25)}
.nb-he.nb-t-label span{letter-spacing:.08em;text-transform:none;font-size:.72em}
/* stamped ink on kraft */
.nb-mat.nb-kraft~.nb-t-ink span{color:rgba(42,28,14,.8);mix-blend-mode:multiply;text-shadow:none}
.nb-mat.nb-kraft~.nb-t-deboss span{color:rgba(60,38,18,.5);text-shadow:0 1px 0 rgba(255,240,215,.35),0 -1px 0 rgba(0,0,0,.18)}
.nb-pcase.nb-pthin{background:var(--nb-paper);box-shadow:0 14px 22px -10px rgba(60,42,20,.35),0 3px 6px rgba(60,42,20,.12)}
.nb-style button{font-weight:500}

/* notebook: every corner is rounded – the outer ones fully, the ones at the spine softly */
body.nb{--rs:calc(var(--rc) * .45)}
body.nb.rc .page.side-r{border-radius:var(--rs) var(--rc) var(--rc) var(--rs)}
body.nb.rc .page.side-l{border-radius:var(--rc) var(--rs) var(--rs) var(--rc)}
body.nb.rc.portrait .page{border-radius:var(--rs) var(--rc) var(--rc) var(--rs)}
body.nb.nb-thin #book-shadow{border-radius:var(--rc)}
.ed-page.nb-ed.side-r{border-radius:calc(var(--nb-r) * .45) var(--nb-r) var(--nb-r) calc(var(--nb-r) * .45)}
.ed-page.nb-ed.side-l{border-radius:var(--nb-r) calc(var(--nb-r) * .45) calc(var(--nb-r) * .45) var(--nb-r)}
.nb-pv .nb-pp.side-r{border-radius:calc(var(--pw) * .025) calc(var(--pw) * .055) calc(var(--pw) * .055) calc(var(--pw) * .025)}
.nb-pv .nb-pp.side-l{border-radius:calc(var(--pw) * .055) calc(var(--pw) * .025) calc(var(--pw) * .025) calc(var(--pw) * .055)}
.nb-pv .nb-pcase.nb-pthin{border-radius:calc(var(--pw) * .055)}

/* watercolour (cold-press) paper: the grain catches the light – shadows and highlights painted as layers, no blend modes */
.nb-paper.nb-wc{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27400%27%20height%3D%27400%27%3E%3Cfilter%20id%3D%27h%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.045%27%20numOctaves%3D%274%27%20seed%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3CfeDiffuseLighting%20lighting-color%3D%27%23fff%27%20surfaceScale%3D%272.4%27%3E%3CfeDistantLight%20azimuth%3D%27225%27%20elevation%3D%2750%27/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix%20values%3D%270%200%200%200%201%200%200%200%200%201%200%200%200%200%20.98%20.9%200%200%200%20-.74%27/%3E%3C/filter%3E%3Crect%20width%3D%27400%27%20height%3D%27400%27%20filter%3D%27url%28%23h%29%27/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27400%27%20height%3D%27400%27%3E%3Cfilter%20id%3D%27w%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.045%27%20numOctaves%3D%274%27%20seed%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3CfeDiffuseLighting%20lighting-color%3D%27%23fff%27%20surfaceScale%3D%272.4%27%3E%3CfeDistantLight%20azimuth%3D%27225%27%20elevation%3D%2750%27/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix%20values%3D%270%200%200%200%20.36%200%200%200%200%20.29%200%200%200%200%20.2%20-.42%200%200%200%20.325%27/%3E%3C/filter%3E%3Crect%20width%3D%27400%27%20height%3D%27400%27%20filter%3D%27url%28%23w%29%27/%3E%3C/svg%3E"),
    radial-gradient(130% 110% at 50% 50%,rgba(0,0,0,0) 58%,rgba(110,85,50,.07) 100%)}
.nb-lbl{font-size:13.5px;color:#333}
.nb-line input[type=range]{flex:1;max-width:220px}

/* entrances from a side: the element glides in from below / right / left / above (distance in --fx-x / --fx-y) */
.fx-from{--fx-n:fxFrom;--fx-e:cubic-bezier(.16,.84,.3,1)}
@keyframes fxFrom{0%{opacity:0;translate:var(--fx-x,0) var(--fx-y,0)}40%{opacity:1}100%{opacity:1;translate:0 0}}


/* ---------- watercolour "paint-in": the picture blooms from two soft blots of colour ---------- */
@property --pr{syntax:'<percentage>';inherits:false;initial-value:0%}
.fx-paint{--fx-n:fxPaint;--fx-e:cubic-bezier(.3,.6,.3,1)}
.fx-paint.fx-on{-webkit-mask-image:radial-gradient(circle at var(--px1,45%) var(--py1,55%),#000 calc(var(--pr) - 22%),transparent var(--pr)),radial-gradient(circle at var(--px2,60%) var(--py2,40%),#000 calc(var(--pr) * .82 - 22%),transparent calc(var(--pr) * .82));
  mask-image:radial-gradient(circle at var(--px1,45%) var(--py1,55%),#000 calc(var(--pr) - 22%),transparent var(--pr)),radial-gradient(circle at var(--px2,60%) var(--py2,40%),#000 calc(var(--pr) * .82 - 22%),transparent calc(var(--pr) * .82))}
@keyframes fxPaint{0%{opacity:0;--pr:0%;filter:saturate(.35) blur(2.5px)}12%{opacity:1}70%{filter:saturate(.85) blur(.4px)}100%{opacity:1;--pr:160%;filter:none}}
/* ---------- "written by hand": the ink appears along the line ---------- */
@property --wr{syntax:'<percentage>';inherits:false;initial-value:0%}
.fx-write{--fx-n:fxWrite;--fx-e:cubic-bezier(.45,.1,.55,.95)}
.fx-write.fx-on.fx-w-rtl{-webkit-mask-image:linear-gradient(to left,#000 calc(var(--wr) - 7%),transparent var(--wr));mask-image:linear-gradient(to left,#000 calc(var(--wr) - 7%),transparent var(--wr))}
.fx-write.fx-on.fx-w-ltr{-webkit-mask-image:linear-gradient(to right,#000 calc(var(--wr) - 7%),transparent var(--wr));mask-image:linear-gradient(to right,#000 calc(var(--wr) - 7%),transparent var(--wr))}
@keyframes fxWrite{0%{opacity:1;--wr:0%}100%{opacity:1;--wr:110%}}
.fx-paint.fx-on,.fx-write.fx-on{animation-fill-mode:both}

/* ---------- stuck-on details ---------- */
.fe-deco{overflow:visible;pointer-events:none}
.ed-page .fe-deco{pointer-events:auto}
.dc-tape{background:var(--dc);opacity:.82;filter:drop-shadow(0 1px 1.5px rgba(60,40,20,.18));
  background-image:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%,rgba(0,0,0,.04))}
.dc-tape.tp-stripes{background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.34) 0 calc(var(--pw) * .008),transparent calc(var(--pw) * .008) calc(var(--pw) * .02)),linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.04))}
.dc-tape.tp-dots{background-image:radial-gradient(circle,rgba(255,255,255,.55) 0 calc(var(--pw) * .0035),transparent calc(var(--pw) * .0042)),linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.04));background-size:calc(var(--pw) * .02) calc(var(--pw) * .02),auto}
.dc-tape.tp-grid{background-image:linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px);background-size:calc(var(--pw) * .016) calc(var(--pw) * .016)}
.dc-c{position:absolute;width:var(--cs);height:var(--cs);background:var(--dc);filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.dc-c.tl{left:0;top:0;clip-path:polygon(0 0,100% 0,0 100%)}
.dc-c.tr{right:0;top:0;clip-path:polygon(0 0,100% 0,100% 100%)}
.dc-c.br{right:0;bottom:0;clip-path:polygon(100% 0,100% 100%,0 100%)}
.dc-c.bl{left:0;bottom:0;clip-path:polygon(0 0,100% 100%,0 100%)}
.dc-clip svg{width:100%;height:100%;display:block;overflow:visible}

/* ---------- pocket with a card ---------- */
.fe-pocket{overflow:visible;cursor:pointer}
.pk-card{position:absolute;left:7%;right:7%;top:0;height:92%;background:var(--pkc);border-radius:calc(var(--pw) * .006);
  box-shadow:0 1px 3px rgba(60,40,20,.2);padding:7% 8%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5em;
  font:400 var(--pkf)/1.45 "Frank Ruhl Libre","Cormorant Garamond",serif;color:#3a3027;transition:transform .7s cubic-bezier(.3,.7,.2,1);overflow:hidden}
.pk-card img{width:70%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.pk-card b{font:700 1.6em/1 "Amatic SC","Caveat",cursive;letter-spacing:.02em}
.pk-card p{margin:0;font-size:.95em}
.pk-link{margin-top:auto;color:#8b6a48;font-size:.9em;text-decoration:none;border-bottom:1px solid rgba(139,106,72,.4)}
.pk-front{position:absolute;left:0;right:0;bottom:0;height:72%;background:var(--pk);border-radius:2px calc(var(--pw) * .012) calc(var(--pw) * .012) 2px;
  clip-path:polygon(0 0,40% 0,44% 7%,56% 7%,60% 0,100% 0,100% 100%,0 100%);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.75%27%20numOctaves%3D%273%27%20seed%3D%276%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27/%3E%3C/filter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23g%29%27/%3E%3C/svg%3E"),linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,0) 12%);
  background-blend-mode:soft-light,normal;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);filter:drop-shadow(0 -1px 2px rgba(60,40,20,.18))}
.pk-front::after{content:"";position:absolute;inset:7% 4% 6%;border:1px dashed rgba(255,248,235,.55);border-radius:2px}
.pk-hint{position:absolute;left:0;right:0;bottom:12%;text-align:center;font:400 calc(var(--pkf) * 1.05)/1 "Amatic SC","Caveat",cursive;color:rgba(40,28,14,.72);mix-blend-mode:multiply;transition:opacity .3s}
.fe-pocket.open .pk-card{transform:translateY(-68%)}
.fe-pocket.open .pk-hint{opacity:0}
@media (hover:hover){.fe-pocket:not(.open):hover .pk-card{transform:translateY(-6%)}}

/* ---------- index tabs on the fore-edge ---------- */
#nb-tabs{position:absolute;inset:0;pointer-events:none;z-index:4}
.nb-tab{position:absolute;pointer-events:auto;border:0;padding:0;cursor:pointer;background:var(--tc);border-radius:0 6px 6px 0;
  box-shadow:inset 3px 0 4px -2px rgba(0,0,0,.25),1px 1px 2px rgba(60,40,20,.2);display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:opacity .25s ease,filter .2s;opacity:1}
.nb-tab.nb-tab-l{border-radius:6px 0 0 6px;box-shadow:inset -3px 0 4px -2px rgba(0,0,0,.25),-1px 1px 2px rgba(60,40,20,.2)}
.nb-tab span{writing-mode:vertical-rl;font:500 clamp(8px,calc(var(--pw) * .018),12px)/1 var(--sans);color:rgba(40,30,20,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:90%;letter-spacing:.04em}
.nb-tab.nb-tab-l span{transform:rotate(180deg)}
.nb-tab:hover{filter:brightness(1.06)}
.nb-tab.off,body.nb-moving .nb-tab{opacity:0;pointer-events:none}

/* ---------- deckle edge (watercolour block) ---------- */
body.nb-deckle .page:not(.nb-cover){border-radius:0!important}
body.nb-deckle .page.side-r:not(.nb-cover),body.nb-deckle.portrait .page:not(.nb-cover){-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201000%201400%27%20preserveAspectRatio%3D%27none%27%3E%3Cfilter%20id%3D%27d%27%20x%3D%27-5%25%27%20y%3D%27-5%25%27%20width%3D%27110%25%27%20height%3D%27110%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.045%27%20numOctaves%3D%273%27%20seed%3D%274%27/%3E%3CfeDisplacementMap%20in%3D%27SourceGraphic%27%20scale%3D%2713%27%20xChannelSelector%3D%27R%27%20yChannelSelector%3D%27G%27/%3E%3C/filter%3E%3Crect%20x%3D%27-60%27%20y%3D%279%27%20width%3D%271052%27%20height%3D%271382%27%20fill%3D%27%23fff%27%20filter%3D%27url%28%23d%29%27/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201000%201400%27%20preserveAspectRatio%3D%27none%27%3E%3Cfilter%20id%3D%27d%27%20x%3D%27-5%25%27%20y%3D%27-5%25%27%20width%3D%27110%25%27%20height%3D%27110%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.045%27%20numOctaves%3D%273%27%20seed%3D%274%27/%3E%3CfeDisplacementMap%20in%3D%27SourceGraphic%27%20scale%3D%2713%27%20xChannelSelector%3D%27R%27%20yChannelSelector%3D%27G%27/%3E%3C/filter%3E%3Crect%20x%3D%27-60%27%20y%3D%279%27%20width%3D%271052%27%20height%3D%271382%27%20fill%3D%27%23fff%27%20filter%3D%27url%28%23d%29%27/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
body.nb-deckle:not(.portrait) .page.side-l:not(.nb-cover){-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201000%201400%27%20preserveAspectRatio%3D%27none%27%3E%3Cfilter%20id%3D%27d%27%20x%3D%27-5%25%27%20y%3D%27-5%25%27%20width%3D%27110%25%27%20height%3D%27110%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.045%27%20numOctaves%3D%273%27%20seed%3D%279%27/%3E%3CfeDisplacementMap%20in%3D%27SourceGraphic%27%20scale%3D%2713%27%20xChannelSelector%3D%27R%27%20yChannelSelector%3D%27G%27/%3E%3C/filter%3E%3Crect%20x%3D%278%27%20y%3D%279%27%20width%3D%271052%27%20height%3D%271382%27%20fill%3D%27%23fff%27%20filter%3D%27url%28%23d%29%27/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201000%201400%27%20preserveAspectRatio%3D%27none%27%3E%3Cfilter%20id%3D%27d%27%20x%3D%27-5%25%27%20y%3D%27-5%25%27%20width%3D%27110%25%27%20height%3D%27110%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.045%27%20numOctaves%3D%273%27%20seed%3D%279%27/%3E%3CfeDisplacementMap%20in%3D%27SourceGraphic%27%20scale%3D%2713%27%20xChannelSelector%3D%27R%27%20yChannelSelector%3D%27G%27/%3E%3C/filter%3E%3Crect%20x%3D%278%27%20y%3D%279%27%20width%3D%271052%27%20height%3D%271382%27%20fill%3D%27%23fff%27%20filter%3D%27url%28%23d%29%27/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
body.nb-deckle.nb-thin #book-shadow{background:transparent}

.fx-done{-webkit-mask-image:none!important;mask-image:none!important}
body.nb-deckle .page:has(.nb-inside-in){-webkit-mask:none!important;mask:none!important;border-radius:var(--rs) var(--rc) var(--rc) var(--rs)!important}
body.nb-deckle .page.side-l:has(.nb-inside-in){border-radius:var(--rc) var(--rs) var(--rs) var(--rc)!important}
.pk-front{box-shadow:inset 0 0 0 999px rgba(80,50,20,.07),inset 0 0 0 1px rgba(0,0,0,.05)}

/* ---------- envelope with a letter ---------- */
.fe-envelope{overflow:visible;cursor:pointer}
.ev-back{position:absolute;inset:0;background:var(--ev);border-radius:calc(var(--pw) * .006);box-shadow:0 2px 6px rgba(60,40,20,.18),inset 0 0 0 1px rgba(0,0,0,.04);
  background-image:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,0) 45%)}
.ev-letter{position:absolute;left:6%;right:6%;top:5%;height:90%;z-index:1;background:var(--evl);border-radius:2px;box-shadow:0 1px 3px rgba(60,40,20,.18);
  padding:8% 9%;display:flex;flex-direction:column;gap:.45em;color:#3a3027;overflow:hidden;
  background-image:repeating-linear-gradient(to bottom,transparent 0 calc(var(--evf) * 1.7 - 1px),rgba(74,86,108,.12) calc(var(--evf) * 1.7 - 1px) calc(var(--evf) * 1.7));background-position:0 calc(var(--evf) * 3.3);
  transition:transform .7s cubic-bezier(.3,.7,.2,1) 0s}
.ev-letter b{font:700 calc(var(--evf) * 1.9)/1 var(--evh);letter-spacing:.01em}
.ev-letter p{margin:0;font:400 var(--evf)/1.7 var(--evb);white-space:pre-line}
.ev-letter i{margin-top:auto;font:400 calc(var(--evf) * 1.5)/1 var(--evh);font-style:normal;align-self:flex-end;color:#8b6a48}
.ev-front{position:absolute;inset:0;z-index:2;background:var(--ev);border-radius:calc(var(--pw) * .006);
  clip-path:polygon(0 0,50% 63%,100% 0,100% 100%,0 100%);
  background-image:linear-gradient(160deg,rgba(255,255,255,.14),rgba(0,0,0,.05)),linear-gradient(to top,rgba(0,0,0,.04),rgba(0,0,0,0) 30%);filter:drop-shadow(0 -1px 1px rgba(0,0,0,.08))}
.ev-flap{position:absolute;left:0;right:0;top:0;height:64%;z-index:3;background:var(--ev);transform-origin:50% 0;
  clip-path:polygon(0 0,100% 0,50% 100%);background-image:linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.08));
  transition:transform .55s cubic-bezier(.4,.2,.2,1) .45s,z-index 0s .7s;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}
.ev-seal{position:absolute;left:50%;top:62%;width:calc(var(--evf) * 2.4);height:calc(var(--evf) * 2.4);transform:translate(-50%,-55%);z-index:4;border-radius:50%;
  background:radial-gradient(circle at 38% 35%,rgba(255,255,255,.28),rgba(255,255,255,0) 42%),var(--evs);
  box-shadow:0 1px 2px rgba(0,0,0,.35),inset 0 0 0 calc(var(--evf) * .18) rgba(0,0,0,.14);display:grid;place-items:center;
  transition:opacity .3s ease .4s,transform .3s ease .4s}
.ev-seal span{font:700 calc(var(--evf) * 1.1)/1 var(--evh);color:rgba(255,235,220,.75)}
.fe-envelope.open .ev-seal{opacity:0;transform:translate(-50%,-55%) scale(.7);transition-delay:0s}
.fe-envelope.open .ev-flap{transform:rotateX(180deg);z-index:0;transition:transform .55s cubic-bezier(.4,.2,.2,1) 0s,z-index 0s .25s}
.fe-envelope.open .ev-letter{transform:translateY(-72%);transition:transform .8s cubic-bezier(.3,.7,.2,1) .5s}
@media (hover:hover){.fe-envelope:not(.open):hover .ev-letter{transform:translateY(-4%)}}
.ev-static .ev-letter{transform:none}

/* ---------- hand-drawn checklist ---------- */
.fe-check{display:flex;flex-direction:column;gap:calc(1em * var(--gap));overflow:visible}
.ck-it{display:flex;align-items:center;gap:.6em;position:relative;line-height:1.25}
.ck-b,.ck-m{width:1.05em;height:1.05em;flex:0 0 auto;overflow:visible}
.ck-b path{fill:none;stroke:currentColor;stroke-opacity:.55;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ck-m{position:absolute;inset-inline-start:.05em;top:50%;transform:translateY(-62%) scale(1.15)}
.ck-m path{fill:none;stroke:var(--ck);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.fe-check.go .ck-m path{stroke-dashoffset:0;transition:stroke-dashoffset .45s cubic-bezier(.5,0,.3,1) calc(.5s + var(--i) * .32s)}
.fe-check.static .ck-m path{transition:none}
.ck-it.done span{opacity:.6;text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ck) 70%,transparent);text-decoration-thickness:.07em}
[dir=rtl] .ff input[dir=ltr]{text-align:right}
[dir=rtl] .ff input[dir=ltr]:focus,[dir=rtl] .ff input[dir=ltr]:not(:placeholder-shown){text-align:left}
[dir=rtl] .ff-f span{letter-spacing:.02em;font-size:.78em}

/* ---------- slides (book.object = 'slides'): one landscape page at a time ---------- */
.sl-deck{position:relative;overflow:visible}
.sl-page{display:none;overflow:hidden;background:#fff}
.sl-page.sl-cur,.sl-page.sl-out{display:block}
.sl-page.sl-out{z-index:1}.sl-page.sl-in{z-index:2}
body.slides .page-shade{background:none!important}
body.slides #book-shadow{border-radius:var(--rc);box-shadow:0 26px 50px -18px rgba(40,30,15,.32),0 4px 12px rgba(40,30,15,.10)}
body.slides.rc .page{border-radius:var(--rc)!important}
.sl-slide-fwd.sl-in{animation:slInR .72s cubic-bezier(.65,0,.25,1) both}
.sl-slide-fwd.sl-out{animation:slOutL .72s cubic-bezier(.65,0,.25,1) both}
.sl-slide-back.sl-in{animation:slInL .72s cubic-bezier(.65,0,.25,1) both}
.sl-slide-back.sl-out{animation:slOutR .72s cubic-bezier(.65,0,.25,1) both}
@keyframes slInR{from{transform:translateX(100%)}to{transform:none}}
@keyframes slOutL{from{transform:none}to{transform:translateX(-100%)}}
@keyframes slInL{from{transform:translateX(-100%)}to{transform:none}}
@keyframes slOutR{from{transform:none}to{transform:translateX(100%)}}
.sl-deck.sl-anim{clip-path:var(--sl-clip)}
/* a true crossfade: the next slide fades in over the current one (no washed-out moment in between) */
.sl-fade-fwd.sl-in,.sl-fade-back.sl-in{animation:slFadeIn .65s ease-in-out both;z-index:3!important}
.sl-fade-fwd.sl-out,.sl-fade-back.sl-out{animation:slHold .65s linear both}
@keyframes slFadeIn{from{opacity:0}to{opacity:1}}
@keyframes slFadeOut{from{opacity:1}to{opacity:0}}
.sl-drift-fwd.sl-in{animation:slDriftIn .8s cubic-bezier(.2,.7,.2,1) both}
.sl-drift-back.sl-in{animation:slDriftInB .8s cubic-bezier(.2,.7,.2,1) both}
.sl-drift-fwd.sl-out,.sl-drift-back.sl-out{animation:slFadeOut .55s ease both}
@keyframes slDriftIn{from{opacity:0;transform:translateX(5%) scale(.985)}to{opacity:1;transform:none}}
@keyframes slDriftInB{from{opacity:0;transform:translateX(-5%) scale(.985)}to{opacity:1;transform:none}}
.ic[hidden]{display:none!important}

/* ---------- page background picture / veil / texture ---------- */
.pg-bgimg{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;pointer-events:none}
.pg-bgveil,.pg-tex{position:absolute;inset:0;pointer-events:none}
.mini-page .pg-bgimg,.mini-page .pg-bgveil,.mini-page .pg-tex{position:absolute}
/* drop a picture on the strip at the bottom of a page → it becomes the page background */
.bg-drop{position:absolute;left:0;right:0;bottom:0;height:16%;min-height:44px;display:none;align-items:center;justify-content:center;z-index:9000;
  background:color-mix(in srgb,var(--accent) 16%,rgba(255,255,255,.75));border-top:2px dashed var(--accent);direction:rtl;pointer-events:auto}
.bg-drop span{font:500 13px var(--sans);color:#2f2a24;background:rgba(255,255,255,.9);padding:5px 12px;border-radius:14px;pointer-events:none}
#ed-canvas.drop-over .bg-drop{display:flex}
.bg-drop.drop-target{background:color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.7))}
.bg-pick{position:relative;border:1.5px dashed #cfc6b6;border-radius:10px;min-height:64px;display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 10px;cursor:pointer;
  font-size:12.5px;color:#7a7365;text-align:center;background:#fbf9f5;transition:background .2s,border-color .2s;margin-bottom:6px}
.bg-pick:hover,.bg-pick.over{background:#f3eee4;border-color:var(--accent)}
.bg-pick img{width:70px;height:46px;object-fit:cover;border-radius:5px;flex:0 0 auto}
.bg-pick.has{justify-content:flex-start;text-align:right}

/* the toolbar always fits: labels of the less-used buttons fold into icons first (tooltips keep the names) */
#ed-bar{overflow-x:auto;scrollbar-width:none}
#ed-bar::-webkit-scrollbar{display:none}

#drop-choice{position:fixed;z-index:400;display:flex;gap:6px;padding:6px;background:#fff;border-radius:14px;box-shadow:0 12px 34px rgba(30,25,15,.22),0 0 0 1px rgba(0,0,0,.06);font-family:var(--sans)}
#drop-choice button{border:0;background:#f6f3ec;border-radius:10px;padding:10px 14px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:right;min-width:150px}
#drop-choice button:hover{background:#efe7da}
#drop-choice b{font-size:14px;font-weight:600;color:#2b2622}
#drop-choice span{font-size:12px;color:#7a7365}
#drop-choice button[data-c=bg]{background:var(--accent);}
#drop-choice button[data-c=bg] b,#drop-choice button[data-c=bg] span{color:#fff}
#drop-choice button[data-c=bg]:hover{filter:brightness(1.08)}
.seg.cut-sh{display:flex;width:100%}.seg.cut-sh button{flex:1;padding:7px 4px;font-size:12.5px}

/* toolbar: every tool shows its full name – icon above, name below (save / preview stay as wide buttons) */
#ed-bar .eb:not(.primary):not(.outline){flex-direction:column;justify-content:center;height:54px;min-width:54px;padding:0 8px;gap:4px;font-size:12px;line-height:1.05;letter-spacing:0}
#ed-bar .eb:not(.primary):not(.outline) svg{width:19px;height:19px;flex:none}
#ed-bar .eb[data-a=folder] span{display:inline}
@media (max-width:1440px){ #ed-bar .eb:not(.primary):not(.outline){min-width:0;padding:0 5px;font-size:11.5px} #ed-bar .sep{margin:0 2px} #ed-bar .eb.outline{padding:0 10px} }

.dot-sw{display:flex;gap:6px;align-items:center;margin:2px 0 12px}
.dot-sw button{width:24px;height:24px;border-radius:50%;border:1px solid #d8d3c7;background:var(--c);cursor:pointer;padding:0}
.dot-sw button.on{outline:2px solid #2d2b26;outline-offset:2px}
.dot-sw label{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#666;margin-inline-start:4px}
.dot-sw input[type=color]{width:28px;height:24px;padding:0;border:1px solid #d8d3c7;border-radius:6px;background:none}

.ai-chips{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 8px}
.ai-chips button{border:1px solid #e1dccf;background:#faf8f3;border-radius:14px;padding:4px 9px;font-size:12px;color:#5a554a;cursor:pointer}
.ai-chips button:hover{background:#f1ede3}
.fe .fe-aivid{pointer-events:none}

/* ---------- mobile slides (book.slideAxis = 'v'): 9:16, one under the other ---------- */
.sl-deck.sl-v{touch-action:none}
.sl-vslide-fwd.sl-in{animation:slInB .72s cubic-bezier(.65,0,.25,1) both}
.sl-vslide-fwd.sl-out{animation:slOutT .72s cubic-bezier(.65,0,.25,1) both}
.sl-vslide-back.sl-in{animation:slInT .72s cubic-bezier(.65,0,.25,1) both}
.sl-vslide-back.sl-out{animation:slOutB .72s cubic-bezier(.65,0,.25,1) both}
@keyframes slInB{from{transform:translateY(100%)}to{transform:none}}
@keyframes slOutT{from{transform:none}to{transform:translateY(-100%)}}
@keyframes slInT{from{transform:translateY(-100%)}to{transform:none}}
@keyframes slOutB{from{transform:none}to{transform:translateY(100%)}}
.sl-vdrift-fwd.sl-in{animation:slDriftInU .8s cubic-bezier(.2,.7,.2,1) both}
.sl-vdrift-back.sl-in{animation:slDriftInD .8s cubic-bezier(.2,.7,.2,1) both}
.sl-vdrift-fwd.sl-out,.sl-vdrift-back.sl-out{animation:slFadeOut .55s ease both}
@keyframes slDriftInU{from{opacity:0;transform:translateY(5%) scale(.985)}to{opacity:1;transform:none}}
@keyframes slDriftInD{from{opacity:0;transform:translateY(-5%) scale(.985)}to{opacity:1;transform:none}}
/* stack – like stories: the next slide rises over the current one, which sinks back a little */
.sl-vstack-fwd.sl-in{animation:slInB .78s cubic-bezier(.3,.75,.2,1) both;box-shadow:0 -18px 40px rgba(0,0,0,.18)}
.sl-vstack-fwd.sl-out{animation:slSink .78s cubic-bezier(.3,.75,.2,1) both}
.sl-vstack-back.sl-in{animation:slRise .78s cubic-bezier(.3,.75,.2,1) both}
.sl-vstack-back.sl-out{animation:slOutB .78s cubic-bezier(.3,.75,.2,1) both;z-index:3!important;box-shadow:0 -18px 40px rgba(0,0,0,.18)}
@keyframes slSink{from{transform:none;filter:none}to{transform:scale(.9);filter:brightness(.55)}}
@keyframes slRise{from{transform:scale(.9);filter:brightness(.55)}to{transform:none;filter:none}}
body.vslides:not(.rc) .sl-page,body.vslides:not(.rc) #book-shadow{border-radius:16px}
/* arrows: up / down, beside the slide */
body.vslides .nav{left:calc(50% + var(--sl-w, 400px) / 2 + 28px)!important;right:auto!important}
body.vslides #nav-prev{top:calc(50% - 34px);transform:translateY(-50%) rotate(90deg)}
body.vslides #nav-next{top:calc(50% + 34px);transform:translateY(-50%) rotate(90deg)}
@media (max-width:700px){
  body.vslides #stage{padding:0 0 var(--foot-h)}
  body.vslides #zoomer{inset:0 0 var(--foot-h)}
  body.vslides .sl-page,body.vslides #book-shadow{border-radius:0!important}
  body.vslides .nav{display:none}
}

/* ---------- video export: the slide alone, nothing else on screen ---------- */
body.vx-rec #bottombar,body.vx-rec #st-banner,body.vx-rec .nav,body.vx-rec #toast,body.vx-rec #clean-edge,body.vx-rec .ed-modal{display:none!important}
body.vx-rec #stage{padding:0!important}
body.vx-rec #zoomer{inset:0!important}
body.vx-rec,body.vx-rec *{cursor:none!important}
#vx-shield{position:fixed;inset:0;z-index:150;cursor:none}
#vx-badge{position:fixed;z-index:151;display:flex;align-items:center;gap:7px;background:rgba(20,18,16,.78);color:#fff;font:500 13px/1 Heebo,sans-serif;padding:8px 13px;border-radius:20px}
#vx-badge i{width:9px;height:9px;border-radius:50%;background:#e5484d;animation:vxBlink 1s ease-in-out infinite}
#vx-badge small{opacity:.7;font-size:11.5px}
@keyframes vxBlink{50%{opacity:.25}}
.vx-range{display:flex;align-items:center;gap:10px}.vx-range input{flex:1}.vx-range b{font-weight:500;min-width:56px;font-size:13px}
.vx-note{background:#f6f2ea;border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.55;color:#4b463d;margin:4px 0 6px}
body.vx-rec .sl-page,body.vx-rec #book-shadow,body.vx-rec .page{border-radius:0!important}

/* ---------- drawer: ready-made books ---------- */
.dw-lib{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}
.lib-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;padding:4px 16px 16px}
.lib-card{border:0;background:none;padding:0;text-align:right;cursor:pointer;display:flex;flex-direction:column;gap:3px;font:inherit;color:inherit}
.lib-card img{width:100%;aspect-ratio:600/848;object-fit:cover;border-radius:4px;box-shadow:0 6px 16px -8px rgba(40,30,15,.45),0 1px 3px rgba(40,30,15,.12);transition:transform .25s,box-shadow .25s;background:#eee8dd}
.lib-card:hover img{transform:translateY(-3px);box-shadow:0 12px 24px -10px rgba(40,30,15,.5)}
.lib-card b{font-size:13px;font-weight:500;margin-top:5px;line-height:1.3}
.lib-card span{font-size:11.5px;color:#8a8275}
.lib-modal .box{width:min(980px,94vw)}
.lib-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.lib-top h2{margin:2px 0 4px}
.lib-cat{font-size:11.5px;letter-spacing:.08em;color:#8a6f4e}
.lib-pv{display:flex;gap:10px;overflow-x:auto;padding:10px 2px 14px;margin:6px 0 4px;scrollbar-width:thin}
.lib-pv img{height:250px;flex:none;border-radius:3px;box-shadow:0 8px 20px -10px rgba(40,30,15,.45),0 1px 3px rgba(40,30,15,.12)}
.lib-row{display:flex;align-items:center;gap:12px;margin:2px 0 6px}
.lib-row .seg{margin:0}

/* ---------- favourites (drawer › מועדפים) ---------- */
.fav-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;padding:4px 16px 16px}
.fav-card{position:relative;display:flex;flex-direction:column;gap:3px;cursor:pointer;text-align:right}
.fav-pv{display:flex;overflow:hidden;min-height:130px;align-items:center;justify-content:center;direction:ltr;background:#efe9df;border-radius:5px;padding:8px 0;transition:transform .25s}
.fav-pv .mini-page{box-shadow:0 6px 16px -8px rgba(40,30,15,.45),0 1px 3px rgba(40,30,15,.12)}
.fav-card:hover .fav-pv{transform:translateY(-3px)}
.fav-card b{font-size:12.5px;font-weight:500;margin-top:5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fav-card span{font-size:11.5px;color:#8a7f70}
.fav-x{position:absolute;top:5px;left:5px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#6b6256;font-size:11px;cursor:pointer;opacity:0;transition:opacity .15s;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.fav-card:hover .fav-x{opacity:1}
.fav-x:hover{background:#c0392b;color:#fff}
.dw-fav .dw-empty svg{fill:none;stroke:#b19a7a;stroke-width:1.3}
.eb.fav-btn{color:#a0523d;border-color:#e3c9bd}
.fav-ask .box{max-width:420px}

/* ---------- more slide transitions (made for Reels / Stories) – the same look for vertical (sl-v…) and landscape (sl-…) ---------- */
.sl-zoom-fwd.sl-in,.sl-vzoom-fwd.sl-in{animation:slZoomIn .6s cubic-bezier(.2,.75,.2,1) both}
.sl-zoom-fwd.sl-out,.sl-vzoom-fwd.sl-out{animation:slZoomOut .6s cubic-bezier(.5,0,.75,0) both}
.sl-zoom-back.sl-in,.sl-vzoom-back.sl-in{animation:slZoomInB .6s cubic-bezier(.2,.75,.2,1) both}
.sl-zoom-back.sl-out,.sl-vzoom-back.sl-out{animation:slZoomOutB .6s cubic-bezier(.5,0,.75,0) both}
@keyframes slZoomIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes slZoomOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(1.18)}}
@keyframes slZoomInB{from{opacity:0;transform:scale(1.18)}to{opacity:1;transform:none}}
@keyframes slZoomOutB{from{opacity:1;transform:none}to{opacity:0;transform:scale(.86)}}
.sl-zoom-fwd.sl-in,.sl-vzoom-fwd.sl-in,.sl-zoom-back.sl-in,.sl-vzoom-back.sl-in{z-index:3!important}

.sl-vwhip-fwd.sl-in{animation:slWhipInU .46s cubic-bezier(.75,0,.15,1) both}
.sl-vwhip-fwd.sl-out{animation:slWhipOutU .46s cubic-bezier(.75,0,.15,1) both}
.sl-vwhip-back.sl-in{animation:slWhipInD .46s cubic-bezier(.75,0,.15,1) both}
.sl-vwhip-back.sl-out{animation:slWhipOutD .46s cubic-bezier(.75,0,.15,1) both}
@keyframes slWhipInU{0%{transform:translateY(100%);filter:blur(14px)}70%{filter:blur(6px)}100%{transform:none;filter:none}}
@keyframes slWhipOutU{0%{transform:none;filter:none}30%{filter:blur(6px)}100%{transform:translateY(-100%);filter:blur(14px)}}
@keyframes slWhipInD{0%{transform:translateY(-100%);filter:blur(14px)}70%{filter:blur(6px)}100%{transform:none;filter:none}}
@keyframes slWhipOutD{0%{transform:none;filter:none}30%{filter:blur(6px)}100%{transform:translateY(100%);filter:blur(14px)}}
.sl-whip-fwd.sl-in{animation:slWhipInL .46s cubic-bezier(.75,0,.15,1) both}
.sl-whip-fwd.sl-out{animation:slWhipOutL .46s cubic-bezier(.75,0,.15,1) both}
.sl-whip-back.sl-in{animation:slWhipInR .46s cubic-bezier(.75,0,.15,1) both}
.sl-whip-back.sl-out{animation:slWhipOutR .46s cubic-bezier(.75,0,.15,1) both}
@keyframes slWhipInL{0%{transform:translateX(100%);filter:blur(14px)}70%{filter:blur(6px)}100%{transform:none;filter:none}}
@keyframes slWhipOutL{0%{transform:none;filter:none}30%{filter:blur(6px)}100%{transform:translateX(-100%);filter:blur(14px)}}
@keyframes slWhipInR{0%{transform:translateX(-100%);filter:blur(14px)}70%{filter:blur(6px)}100%{transform:none;filter:none}}
@keyframes slWhipOutR{0%{transform:none;filter:none}30%{filter:blur(6px)}100%{transform:translateX(100%);filter:blur(14px)}}

.sl-blur-fwd.sl-in,.sl-vblur-fwd.sl-in,.sl-blur-back.sl-in,.sl-vblur-back.sl-in{animation:slBlurIn .85s ease both;z-index:3!important}
.sl-blur-fwd.sl-out,.sl-vblur-fwd.sl-out,.sl-blur-back.sl-out,.sl-vblur-back.sl-out{animation:slBlurOut .85s ease both}
@keyframes slBlurIn{from{opacity:0;filter:blur(22px);transform:scale(1.04)}to{opacity:1;filter:none;transform:none}}
@keyframes slBlurOut{from{opacity:1;filter:none}to{opacity:0;filter:blur(22px)}}

.sl-vwipe-fwd.sl-in{animation:slWipeU .78s cubic-bezier(.65,0,.25,1) both;z-index:3!important}
.sl-vwipe-back.sl-in{animation:slWipeD .78s cubic-bezier(.65,0,.25,1) both;z-index:3!important}
.sl-wipe-fwd.sl-in{animation:slWipeL .78s cubic-bezier(.65,0,.25,1) both;z-index:3!important}
.sl-wipe-back.sl-in{animation:slWipeR .78s cubic-bezier(.65,0,.25,1) both;z-index:3!important}
.sl-vwipe-fwd.sl-out,.sl-vwipe-back.sl-out,.sl-wipe-fwd.sl-out,.sl-wipe-back.sl-out{animation:slHold .78s linear both}
@keyframes slWipeU{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes slWipeD{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes slWipeL{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes slWipeR{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes slHold{from{opacity:1}to{opacity:1}}

/* slow zoom on every slide while the video is recorded (Ken Burns) */
body.vx-kb .sl-page.sl-cur > *{animation:slKB var(--kb-dur, 5s) linear both;transform-origin:50% 45%}
@keyframes slKB{from{transform:scale(1)}to{transform:scale(1.07)}}
.vx-try{position:relative;width:96px;height:170px;margin:0 auto 12px;overflow:hidden;border-radius:12px;background:#e9e4dc;box-shadow:0 6px 18px -8px rgba(0,0,0,.35)}
.vx-tp{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font:600 30px var(--sans, sans-serif);color:#fff}
.vx-tp.on{display:flex}.vx-tp.sl-in{z-index:2}
.vx-tp.a{background:linear-gradient(160deg,#cdb08a,#8a6f4e)}
.vx-tp.b{background:linear-gradient(160deg,#8d9a7a,#3f4a35)}
/* fades for Reels: slow crossfade, and a dip through black */
.sl-fadeslow-fwd.sl-in,.sl-fadeslow-back.sl-in{animation:slFadeIn 1.2s ease-in-out both;z-index:3!important}
.sl-fadeslow-fwd.sl-out,.sl-fadeslow-back.sl-out{animation:slHold 1.2s linear both}
.sl-dipb-fwd.sl-in,.sl-dipb-back.sl-in{animation:slDipIn 1.1s ease both;z-index:3!important}
.sl-dipb-fwd.sl-out,.sl-dipb-back.sl-out{animation:slDipOut 1.1s ease both}
@keyframes slDipOut{0%{filter:brightness(1)}50%,100%{filter:brightness(0)}}
@keyframes slDipIn{0%,49%{opacity:0;filter:brightness(0)}50%{opacity:1;filter:brightness(0)}100%{opacity:1;filter:brightness(1)}}
.ed-modal .box{max-height:94vh;overflow:auto}
/* frame shapes – one click: arch, upside-down arch, pill, circle, leaf */
.fs-pick{margin:4px 0 10px}
.fs-pick .lbl{display:block;font-size:12px;color:#77705f;margin-bottom:6px}
.fs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.fs-grid button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 5px;border:1px solid #e4ded2;border-radius:10px;background:#fbf9f5;cursor:pointer;font-size:11px;color:#5d564b}
.fs-grid button:hover{background:#f3eee5}
.fs-grid button.on{border-color:#a68a5b;background:#f6efe2;color:#2b2723;box-shadow:0 0 0 1px #a68a5b inset}
.fs-grid i{display:block;height:24px;line-height:0}
.fs-grid i svg{height:22px;width:auto}

/* ---------- interactivity: elements that appear on a click ---------- */
.fe.fe-wait:not(.fe-shown){opacity:0!important;visibility:hidden;pointer-events:none}
.fe.fe-wait.fe-shown:not(.fx){animation:feReveal .6s cubic-bezier(.2,.75,.2,1) both}
@keyframes feReveal{from{opacity:0;transform:scale(.94);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.fe.fe-trigger{cursor:pointer}
.fe.fe-trigger.fe-text:hover{opacity:.78}
/* in the editor: hidden-until-click elements are half visible with a dashed outline; while choosing, the trigger and its targets glow */
#ed-spread .fe.ed-reveal{opacity:.55;outline:1.5px dashed #a68a5b;outline-offset:2px}
#ed-spread .fe.ed-reveal::after{content:'מופיע בלחיצה';position:absolute;top:4px;inset-inline-start:4px;font:600 10px/1 var(--sans,sans-serif);background:#a68a5b;color:#fff;padding:3px 6px;border-radius:8px;pointer-events:none;direction:rtl}
#ed-spread .fe.act-trigger{outline:2px solid #2b2723;outline-offset:3px}
#ed-spread .fe.act-target{opacity:.9;outline:2.5px solid #c9a35f;outline-offset:2px;box-shadow:0 0 0 6px rgba(201,163,95,.18)}
#ed-spread .fe.ed-try{animation:feReveal .6s cubic-bezier(.2,.75,.2,1) both;opacity:1}
.fe.fe-trigger.on .tx,.fe.fe-trigger.on{text-decoration:underline;text-decoration-color:#a68a5b;text-underline-offset:.35em;text-decoration-thickness:1px}

/* 🎬 animation & clicks panel */
body.editing.ap-open #editor{grid-template-columns:200px 1fr 390px}
#ed-bar .eb.ap-btn.on{background:#2b2723;color:#fff}
.ap-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.ap-head h3{margin:0!important;font-size:15px!important;color:#2b2723!important;text-transform:none!important;letter-spacing:0!important}
.ap-x{border:0;background:#f1ece2;border-radius:50%;width:28px;height:28px;cursor:pointer;font-size:13px;color:#555}
.ap-steps{margin:0 0 10px;padding-inline-start:18px;font-size:12px;line-height:1.6;color:#6a6458}
.ap-list{display:flex;flex-direction:column;gap:6px}
.ap-row{border:1px solid #ebe5d9;border-radius:11px;padding:6px 8px;background:#fdfbf7;transition:border-color .2s,box-shadow .2s}
.ap-row:hover{border-color:#c9a35f}
.ap-row.sel{border-color:#a68a5b;box-shadow:0 0 0 3px rgba(166,138,91,.16)}
.ap-row.is-trig{background:#fbf6ec;border-color:#e2d4b8}
.ap-top{display:flex;align-items:center;gap:7px;cursor:pointer}
.ap-n{flex:none;width:21px;height:21px;border-radius:50%;background:#2b2723;color:#fff;font:600 11px/21px var(--sans,sans-serif);text-align:center}
.ap-chip .ap-n{background:#a68a5b}
.ap-th{flex:none;width:30px;height:30px;border-radius:6px;background:#eee center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:13px;color:#3d3b33;border:1px solid #e4ded2;overflow:hidden}
.ap-th.ap-tx{background:#fff}
.ap-th.ap-ic svg{width:16px;height:16px;fill:none;stroke:#6d675c;stroke-width:1.6}
.ap-name{flex:1;min-width:0;font-size:12.5px;color:#2b2723;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-fx{flex:none;width:118px;font-size:11.5px;padding:4px 5px;border:1px solid #ddd6c8;border-radius:7px;background:#fff;color:#4a453c}
.ap-tap{flex:none;width:30px;height:28px;border:1px solid #ddd6c8;border-radius:7px;background:#fff;cursor:pointer;font-size:14px;line-height:1;filter:grayscale(1);opacity:.75}
.ap-tap:hover,.ap-row.open .ap-tap{opacity:1}
.ap-tap.on{background:#2b2723;border-color:#2b2723;filter:none;opacity:1}
.ap-click{margin-top:8px;padding:8px;border-radius:9px;background:#f4eee3}
.ap-lbl{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:#6a6458;font-weight:600}
.ap-click select{width:100%;font-size:12px;padding:5px 6px;border:1px solid #ddd6c8;border-radius:8px;background:#fff}
.ap-chips{display:flex;flex-direction:column;gap:5px;margin:8px 0 6px}
.ap-chip{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #e6dcc8;border-radius:8px;padding:4px 6px}
.ap-chip .ap-th{width:24px;height:24px}
.ap-st{flex:none;display:flex;align-items:center;gap:3px;font-size:10.5px;color:#7d7668;cursor:pointer;white-space:nowrap}
.ap-st input{margin:0}
.ap-rm{flex:none;border:0;background:none;color:#a0998b;cursor:pointer;font-size:12px;padding:2px 4px}
.ap-rm:hover{color:#b3261e}
.ap-trow{display:flex;gap:6px}
.ap-trow .eb{flex:none;padding:4px 10px}
#ed-spread .fe .ap-badge{position:absolute;top:4px;inset-inline-end:4px;z-index:30;min-width:20px;height:20px;padding:0 4px;border-radius:10px;background:#2b2723;color:#fff;font:600 11px/20px var(--sans,sans-serif);text-align:center;pointer-events:none;box-shadow:0 1px 4px rgba(0,0,0,.25);direction:ltr}
#ed-spread .fe .ap-badge.rev{background:#a68a5b}
#ed-spread .fe .ap-badge.trig{outline:2px solid #c9a35f}
body.ap-open .ed-page .fe .tag{display:none}
body.ap-open #ed-spread .fe.ed-reveal{opacity:.18}
body.ap-open #ed-spread .fe.ed-reveal::after{display:none}
body.ap-open #ed-spread .fe.ed-reveal.ed-start{opacity:.9}
#ed-spread .fe.ap-hi{outline:3px solid #c9a35f!important;outline-offset:3px;opacity:1!important}
#ed-spread .fe.ed-reveal.ed-start{opacity:1}
#ed-spread .fe.ed-reveal.ed-start::after{content:'מתחלף בלחיצה'}

.lib-all{width:min(860px,94vw)}
.lib-all .lib-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));max-height:70vh;overflow:auto}

/* spread order */
.arr-modal .box{width:min(1180px,96vw);max-height:92vh;display:flex;flex-direction:column}
.arr-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px}
.arr-top h2{margin:0 0 4px}
.arr-grid{display:flex;flex-wrap:wrap;gap:18px 16px;overflow:auto;padding:6px 4px 10px}
.arr-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;border-radius:12px;border:1.5px solid transparent;background:#f6f3ee;cursor:grab;transition:border-color .2s,transform .2s,opacity .2s}
.arr-card.fixed{cursor:default;opacity:.7}
.arr-card:not(.fixed):hover{border-color:#cdbf9f}
.arr-card.dragging{opacity:.35}
.arr-card.over{border-color:var(--accent,#8a6f4e);transform:scale(1.03);box-shadow:0 0 0 4px rgba(138,111,78,.18)}
.arr-pv{display:flex;gap:0;box-shadow:0 6px 14px -8px rgba(40,30,15,.5)}
.arr-pv .mini-page{pointer-events:none}
.arr-ft{display:flex;align-items:center;gap:8px;font-size:12px;color:#6d675c}
.arr-mv{border:1px solid #d9d1c2;background:#fff;border-radius:50%;width:24px;height:24px;line-height:20px;font-size:16px;cursor:pointer;color:#5a5348;padding:0}
.arr-mv:hover{background:#2b2723;color:#fff;border-color:#2b2723}
.thumbs-head .th-arr{margin-inline-start:auto;margin-inline-end:12px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:inherit;border-radius:18px;padding:6px 14px;font:inherit;font-size:13px;cursor:pointer}
.thumbs-head .th-arr:hover{background:rgba(255,255,255,.22)}

#btn-music .x{display:none}
#btn-music.muted .x{display:inline}
#btn-music.muted{opacity:.55}

.cmp-l{text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.35)}

/* one picture across both pages: no gutter shadow (only a breath of it) and no hairline at the fold */
.page.seamless{background:transparent;overflow:visible}
.page.seamless .page-shade{background:none!important}
.page.seamless.side-l .page-shade{background:linear-gradient(to left,rgba(0,0,0,.07) 0,rgba(0,0,0,.02) .8%,rgba(0,0,0,0) 2%)!important}
.page.seamless.side-r .page-shade{background:linear-gradient(to right,rgba(0,0,0,.06) 0,rgba(0,0,0,.02) .8%,rgba(0,0,0,0) 2%)!important}
.page.seamless.side-l .page-inner{right:-1.5px}
.page.seamless.side-r .page-inner{left:-1.5px}

/* dark desk: the side arrows turn light */
body.dark-desk .nav{color:#f3ece2;opacity:.8}
body.dark-desk .nav:hover{opacity:1;background:rgba(255,255,255,.14);box-shadow:none}

/* phones & tablets: the arrows sit over the pages – a dark glass disc with a white arrow stays visible on light and dark pages alike */
@media (max-width:700px), (hover:none) and (pointer:coarse){
  body .nav, body.dark-desk .nav{background:rgba(26,22,18,.46)!important;color:#fff!important;opacity:.92;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 0 0 1px rgba(255,255,255,.28),0 2px 10px rgba(0,0,0,.22)}
  body .nav svg{stroke-width:1.8}
  body .nav.off{opacity:0}
}

/* welcome hint – one quiet line above the toolbar, on the reader's first visit */
#fb-hint{position:fixed;left:50%;bottom:calc(var(--foot-h, 56px) + 18px + env(safe-area-inset-bottom, 0px));transform:translate(-50%,8px);z-index:150;
  display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:10px 18px 10px 14px;border-radius:999px;
  background:rgba(24,21,18,.62);color:#f6f1e8;-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 8px 28px rgba(0,0,0,.22);font:400 14px/1.35 'Heebo','Jost',system-ui,sans-serif;letter-spacing:.02em;
  opacity:0;pointer-events:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
#fb-hint[dir=rtl]{padding:10px 14px 10px 18px}
#fb-hint.on{opacity:1;transform:translate(-50%,0)}
#fb-hint svg{flex:none;width:18px;height:18px;fill:none;stroke:#d9bf93;stroke-width:1.4;stroke-linejoin:round}
#fb-hint span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:420px){#fb-hint{font-size:13px;padding-inline:12px 14px}}
#bottombar.fb-glow .tools .ic{animation:fbGlow 2.4s ease-in-out 1}
#bottombar.fb-glow .tools .ic:nth-child(2){animation-delay:.08s}#bottombar.fb-glow .tools .ic:nth-child(3){animation-delay:.16s}
#bottombar.fb-glow .tools .ic:nth-child(4){animation-delay:.24s}#bottombar.fb-glow .tools .ic:nth-child(5){animation-delay:.32s}
#bottombar.fb-glow .tools .ic:nth-child(6){animation-delay:.4s}#bottombar.fb-glow .tools .ic:nth-child(7){animation-delay:.48s}
@keyframes fbGlow{0%,100%{box-shadow:0 0 0 0 rgba(201,161,114,0)}35%{box-shadow:0 0 0 3px rgba(201,161,114,.35);background:rgba(201,161,114,.14)}}
body.clean #fb-hint{bottom:calc(22px + env(safe-area-inset-bottom, 0px))}
@media (prefers-reduced-motion:reduce){#fb-hint{transition:opacity .4s}#bottombar.fb-glow .tools .ic{animation:none}}

/* cards gallery: small pictures as buttons, small arrows slide the row */
.gc-wrap{overflow:visible}
.gc-view{position:absolute;top:0;bottom:0;left:var(--gc-in,calc(var(--pw) * .028));right:var(--gc-in,calc(var(--pw) * .028));clip-path:inset(-40% -2.6% -40% -2.6%)}
.gc-track{display:flex;column-gap:var(--gc-gap);height:100%;transition:transform .55s cubic-bezier(.22,.8,.25,1);will-change:transform}
.gc-card{flex:0 0 calc((100% - (var(--gc-n) - 1) * var(--gc-gap)) / var(--gc-n));display:flex;flex-direction:column;text-decoration:none;color:inherit;cursor:pointer}
.gc-pic{position:relative;flex:1 1 auto;border-radius:var(--gc-r);overflow:hidden;background:#e6e1d9;
  box-shadow:0 calc(var(--pw) * .011) calc(var(--pw) * .014) calc(var(--pw) * -.005) rgba(42,32,22,.38),0 calc(var(--pw) * .002) calc(var(--pw) * .004) rgba(42,32,22,.14);
  transition:transform .35s ease,box-shadow .35s ease}
.gc-flat .gc-pic{box-shadow:none}
.gc-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gc-cap{flex:0 0 auto;margin-top:calc(var(--pw) * .008);font-family:var(--gc-capf);font-size:var(--gc-cap);color:var(--gc-capc);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s}
.gc-rtl .gc-cap{direction:rtl;text-align:right}
@media(hover:hover){.gc-card:hover .gc-pic{transform:translateY(calc(var(--pw) * -.005));box-shadow:0 calc(var(--pw) * .017) calc(var(--pw) * .02) calc(var(--pw) * -.006) rgba(42,32,22,.42),0 calc(var(--pw) * .003) calc(var(--pw) * .006) rgba(42,32,22,.16)}
  .gc-card:hover .gc-pic img{transform:scale(1.05)}.gc-card:hover .gc-cap{opacity:.7}}
.gc-arrow{position:absolute;top:calc(50% - var(--gc-cap) * .9);transform:translateY(-50%);width:var(--gc-aw,calc(var(--pw) * .021));height:var(--gc-aw,calc(var(--pw) * .021));min-width:24px;min-height:24px;border-radius:50%;
  border:1px solid rgba(58,53,48,.35);background:rgba(255,255,255,.72);backdrop-filter:blur(6px);display:grid;place-items:center;padding:0;cursor:pointer;z-index:3;transition:opacity .3s,background .2s,transform .2s}
.gc-nocap .gc-arrow{top:50%}
.gc-arrow svg{width:58%;height:58%;fill:none;stroke:#3a3530;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gc-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.gc-l{left:0}.gc-r{right:0}
.gc-arrow.off{opacity:.25;pointer-events:none}

/* publish to the site */
.pub-box .pub-grid{display:grid;gap:12px;margin-top:12px}
.pub-f{display:flex;flex-direction:column;gap:5px;font-size:13px;color:#5f574e}
.pub-f input,.pub-f select,.pub-f textarea{font:inherit;font-size:14px;color:#2b2723;border:1px solid #ddd8cc;border-radius:8px;padding:8px 10px;background:#fcfbf8;width:100%;box-sizing:border-box}
.pub-f textarea{resize:vertical}
.pub-url{display:flex;align-items:center;border:1px solid #ddd8cc;border-radius:8px;background:#fcfbf8;padding:0 10px;font:13px/1 ui-monospace,Menlo,monospace;color:#8a8278}
.pub-url input{border:0!important;background:transparent!important;padding:9px 2px!important;font:14px ui-monospace,Menlo,monospace!important;color:#2b2723;flex:1;min-width:60px}
.pub-hint{color:#9a9188;font-size:12px}
.pub-chk{display:flex;align-items:center;gap:8px;font-size:14px;color:#2b2723}
.pub-lib{display:grid;grid-template-columns:150px 1fr;gap:12px 18px;transition:opacity .25s}
.pub-lib>.wide,.pub-lib>.pub-f.wide{grid-column:1/-1}
.pub-cover{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.pub-cv{width:100%;background:#efece5 center/cover no-repeat;border-radius:4px;box-shadow:0 6px 16px -8px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.06)}
.pub-cv.empty{background-image:repeating-linear-gradient(45deg,#efece5 0 8px,#e7e2d8 8px 16px)}
.pub-fields{display:grid;gap:10px}
.pub-link{color:#8c7146;word-break:break-all}
@media(max-width:560px){.pub-lib{grid-template-columns:1fr}}

/* readable text (2026.10.28): minimum on-screen size for text inside the reader */
#book{--tmin:12px}

/* smooth spread (book.flatSpread): no fold shade in the middle, the two halves meet without a hairline – picture books */
body.flat-spread .page-shade,body.flat-spread .page.seamless .page-shade{background:none!important}
body.flat-spread .page.side-l .page-inner{right:-1px}
body.flat-spread .page.side-r .page-inner{left:-1px}

/* play / pause button of a film (el.playBtn), beside the sound button */
.fe-snd.fe-pp{left:44px}.fe-pp svg{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}.fe-pp .pl{display:none;fill:#fff;stroke:none}.fe-pp.paused .pl{display:inline}.fe-pp.paused .pa{display:none}

/* opening tap for books with narration / music (book.startOverlay) */
#start-ov{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(239,233,223,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:opacity .6s}
#start-ov.out{opacity:0;pointer-events:none}
#start-ov button{display:flex;flex-direction:column;align-items:center;gap:10px;border:0;background:rgba(255,253,248,.94);border-radius:28px;padding:26px 44px 22px;cursor:pointer;box-shadow:0 20px 50px -18px rgba(60,50,30,.45);font-family:'Cormorant Garamond',Georgia,serif;color:#3d4a35;transition:transform .3s}
#start-ov button:hover{transform:scale(1.04)}
#start-ov .so-ic{width:64px;height:64px;border-radius:50%;background:#56664b;display:grid;place-items:center;animation:soPulse 2.4s ease-in-out infinite}
#start-ov .so-ic svg{width:28px;height:28px;fill:#fff;margin-left:4px}
#start-ov .so-t{font-size:26px;font-weight:500;letter-spacing:.01em}
#start-ov .so-s{font-size:16px;opacity:.7;font-style:italic}
@keyframes soPulse{0%,100%{box-shadow:0 0 0 0 rgba(86,102,75,.35)}50%{box-shadow:0 0 0 14px rgba(86,102,75,0)}}

/* credit line in the bottom bar (book.credit) */
#bb-credit{font-size:12px;letter-spacing:.05em;color:var(--muted);opacity:.75;text-decoration:none;white-space:nowrap;transition:opacity .25s}
#bb-credit[href]:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){#bb-credit{display:none}}