html,body,#app{height:100%;height:100dvh}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);box-sizing:border-box}
input,select,textarea{font-size:16px}
[data-act=ocr],[data-act=pictureSearchTest],[data-act=exportPlus],[data-act=matrixHelp],[data-act=keybindings],.bottomnav [data-act=cardsBtn]{display:none!important}
html:has(.v8-viewer),body:has(.v8-viewer){overflow:hidden;overscroll-behavior:none}
.v8-viewer{--bar:32px}
.v8-viewer .stage{top:env(safe-area-inset-top);bottom:calc(var(--bar) + env(safe-area-inset-bottom))}
.v8-viewer .matrix-window .image-card,.v8-viewer .neighbor-cell{touch-action:none}
.v8-viewer .bottomnav{width:100%;height:calc(var(--bar) + env(safe-area-inset-bottom));grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:env(safe-area-inset-bottom)}
.v8-viewer .bottomnav:has(.deck-banner111){grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr)}
.v8-viewer .bottomnav:has(.matrix-arrow.deck-banner111){border-block:0!important;box-shadow:none}
.v8-viewer .bottomnav:has(#superDots){grid-template-columns:minmax(0,1fr) minmax(0,4fr) minmax(0,1fr)}
.v8-viewer .bottomnav:has(#superDots):has(.deck-banner111){grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,3fr) minmax(0,1fr)}
.v8-viewer .bottomnav #superDots{min-width:0}
.v8-viewer .bottomnav #superDots .stack-rail{position:static;transform:none;width:100%;height:100%;padding:1px 4px;gap:3px}
.v8-viewer .bottomnav .stack-rail button{flex:none}
.v8-viewer .bottomnav>:is([data-act=vaultBtn],[data-act=deckBtn]){height:26px;min-height:0;align-self:center;padding-block:0}
.v8-viewer .viewer-history{top:env(safe-area-inset-top);left:0;right:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);background:var(--theme-rail);height:var(--bar);padding:0 3px;gap:3px;z-index:36}
.viewer-history .history-tools{grid-column:1;grid-row:1;justify-self:start;gap:3px}
.viewer-history .deck-banner111{grid-column:2;grid-row:1}
.viewer-history .phone-matrix-options{grid-column:3;grid-row:1}
.v8-viewer .phone-matrix-options .matrix-settings11{width:27px;height:27px;padding:0;display:grid;place-items:center;font-size:21px}
.v8-viewer .neighbor-cell:not(.neighbor-text-cover) img[data-preview-asset]{object-fit:cover}
.v8-viewer .viewer-history button{height:27px;min-height:0;padding-block:0}
.v8-viewer .neighbor-cell .matrix-number{display:none}
.v8-viewer .neighbor-cell>.checklist-paper{position:absolute;inset:0 auto auto 50%;transform:translateX(-50%);width:max(100%,var(--phone-paper-width,65vw));height:max(100%,var(--phone-paper-height,100%));overflow:hidden}
.v8-viewer .neighbor-cell[data-slot$=":-1"]>.checklist-paper{left:auto;right:0;transform:none}
.v8-viewer .neighbor-cell[data-slot$=":1"]>.checklist-paper{left:0;transform:none}
.v8-viewer .neighbor-cell[data-slot^="-1:"]>.checklist-paper{top:auto;bottom:0}
.v8-viewer .matrix-bar11 .phone-edit{color:var(--accent)}
.phone-edit::before{content:'EDIT';font:800 12px/1 system-ui;letter-spacing:.03em}
.v8-viewer .phone-check-activate{position:absolute;inset:0;z-index:2;border:0;background:transparent;color:var(--text);display:flex;align-items:flex-end;justify-content:center;padding:7px;touch-action:none}
.phone-check-activate span{padding:4px 10px;border:1px solid var(--line);border-radius:1rem;background:var(--theme-rail);font-size:12px;font-weight:600}
.phone-matrix-options{display:flex;align-items:center;justify-content:flex-end;gap:3px;min-width:0}
.history-tools .btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.history-tools [data-act=redo] svg{transform:scaleX(-1)}
.v8-viewer .viewer-history .appearance-top{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v8-viewer #cardMount :is(.text-card,.checklist-paper){touch-action:pan-y pinch-zoom;overscroll-behavior:contain}
.v8-viewer :is(.viewer-history,.bottomnav) .matrix-arrow.deck-banner111{
 position:relative;inset:auto!important;transform:none;width:auto;min-width:0;height:100%;min-height:0;flex:1;
 grid-template-columns:16px minmax(0,1fr) 16px;gap:3px;padding:0 12px;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,9px 100%);border-radius:0;
 isolation:isolate;border:0;box-shadow:none;background:color-mix(in srgb,var(--accent) 60%,var(--theme-rail));
}
.v8-viewer :is(.viewer-history,.bottomnav) .matrix-arrow.deck-banner111:focus-visible{background:var(--accent)}
.v8-viewer .bottomnav .matrix-arrow.deck-banner111{clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 100%,0 100%)}
.v8-viewer .deck-banner111 .banner-deck-name{display:block;white-space:nowrap;text-overflow:ellipsis;font-size:12px}
.v8-viewer .deck-banner111 .banner-waymark svg{width:14px;height:15px}
.v8-viewer :is(.viewer-history,.bottomnav) .matrix-arrow.deck-banner111::before{content:'';position:absolute;inset:1px 1.3px;clip-path:inherit;border:0;box-shadow:none;background:var(--theme-rail);z-index:-1;pointer-events:none}
.v8-viewer .card-arrow{width:30px;height:44px;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;top:calc(50% - 22px)}
.v8-viewer .card-arrow svg{width:16px;height:20px;filter:drop-shadow(0 1px 2px #000)}
.v8-viewer .card-arrow[hidden]{display:none}
.v8-viewer .left-arrow{left:0!important}.v8-viewer .right-arrow{right:0!important}

/* Size the grid against the visible stage, including when Safari changes its bars.
   Attached notes and cinema have their own geometry in the shared viewer. */
.v8-viewer:not(.cinema-mode) .stage:not(.has-attached-notes){--rail-space:2px;--phone-gap:2px;--peek:0%;--preview-track:0%;--row-gap:0px}
.v8-viewer:not(.cinema-mode) .stage:not(.has-attached-notes):has(.actual-stack121):has(#superDots){--rail-space:32px}
.v8-viewer[data-layout=wide] .stage:not(.has-attached-notes):has([data-slot="-1:0"]){--peek:18%;--preview-track:24%;--row-gap:var(--phone-gap)}
.v8-viewer:not(.cinema-mode) .stage:not(.has-attached-notes) .matrix-window{
 inset:calc(var(--bar) + 2px) 2px var(--rail-space);width:auto;height:auto;transform:none;
}
.v8-viewer:not(.cinema-mode) .stage:not(.has-attached-notes) .matrix-grid{
 width:100%!important;height:100%;transform:none!important;align-content:center;
 grid-template-rows:var(--preview-track) calc(100% - 2 * var(--peek) - 2 * var(--row-gap)) var(--preview-track);
 grid-template-columns:minmax(0,1fr) minmax(0,1.65fr) minmax(0,1fr);gap:var(--row-gap) var(--phone-gap);
}
.v8-viewer:not(.cinema-mode) .stage:not(.has-attached-notes) .matrix-grid:not(:has([data-slot$=":1"])){grid-template-columns:0 minmax(0,1fr) 0;column-gap:0}
.v8-viewer .stage:not(.has-attached-notes) .card-arrow{top:calc(50% + (var(--bar) - var(--rail-space))/2 - 22px)}
.v8-viewer .stage:not(.has-attached-notes) .stack-rail{top:auto;bottom:1px;left:50%;transform:translateX(-50%);height:29px;width:min(440px,96%);padding:1px 4px}
.v8-viewer .stack-rail :is(.stack-scroll,.stack-step,.super-dot){height:25px}
.v8-viewer .current-cell .matrix-bar11{--matrix-button-width:clamp(25px,24%,145px)}
.phone-layout{border:1px solid var(--line);border-radius:12px;margin:8px 0;padding:10px}.phone-layout label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0}
.settings-dialog,.editor-modal{max-height:90dvh;max-width:96vw}.settings-dialog-body,.editor-body{overflow:auto}
.settings-backdrop{padding: max(12px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
.settings-backdrop .settings-dialog{display:flex;flex-direction:column;max-height:min(90dvh,100%);overflow:hidden}
.settings-dialog>.editor-head{flex:none}.settings-dialog>.settings-dialog-body{min-height:0;overflow-y:auto;overscroll-behavior:contain}
#checklistRows input[type=text]{font-size:16px}
#addChecklistRow{touch-action:manipulation}
@media(orientation:portrait){
 .viewer-history .phone-matrix-options button{padding-inline:5px}
 .v8-viewer:not(.cinema-mode) .stage:not(.has-attached-notes) .matrix-grid{grid-template-columns:minmax(0,1fr) minmax(0,4fr) minmax(0,1fr)}
 .vault-entry-screen .mode-choice{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-content:center;gap:10px;padding:12px}.vault-entry-screen .mode-choice.single{grid-template-columns:minmax(0,65%)!important;justify-content:center}
 .vault-entry-screen .mode-card{width:100%!important;min-width:0;min-height:120px;height:clamp(130px,23dvh,195px);padding:8px}.vault-entry-screen .mode-icon{transform:scale(.58);height:56px}.vault-entry-screen .mode-card .big{font-size:19px}
 .card-album{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.vault-write-dock{width:calc(100% - 14px);bottom:calc(4px + env(safe-area-inset-bottom))}.topbar h1{min-width:0;overflow:hidden;text-overflow:ellipsis}
 .v8-viewer .current-cell .matrix-bar11{gap:2px}.v8-viewer .matrix-bottom11{display:flex!important;flex-wrap:wrap;justify-content:center;align-content:center;min-height:60px;height:auto}
 /* The Deck is a strip of equal-size Cards. Only the inside edges of its
    neighbors enter the viewport; the strip follows the active photo's shape. */
 .v8-viewer[data-layout=deck]:not(.cinema-mode) .stage:not(.has-attached-notes) .matrix-window{
   container-type:inline-size;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;
 }
 .v8-viewer[data-layout=deck]:not(.cinema-mode) .stage:not(.has-attached-notes) .matrix-grid{
   --phone-track:72cqw;width:calc(3 * var(--phone-track) + 2 * var(--phone-gap))!important;
   height:clamp(min(170px,100%),calc(var(--phone-track) / var(--phone-photo-ratio,.82) + 84px),100%);
   grid-template-columns:repeat(3,minmax(0,1fr));
 }
 .v8-viewer[data-layout=deck]:not(.cinema-mode) .stage:not(.has-attached-notes) .matrix-grid:not(:has([data-slot$=":1"])){
   --phone-track:100cqw;width:100%!important;grid-template-columns:0 minmax(0,1fr) 0;
 }
 .v8-viewer[data-layout=deck] .matrix-top11{height:38px}
 .v8-viewer[data-layout=deck] .matrix-bottom11{height:44px;min-height:44px;max-height:44px}
 .v8-viewer[data-layout=deck] .current-cell .card-shell{top:38px!important;bottom:44px!important;height:auto!important}
}

/* Library screens share one folding command area. Controls below it keep
   their own scroll position and can be used while the header is folded. */
.phone-library-bar{flex:none;position:relative;z-index:6;background:var(--theme-rail);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.phone-library-body[hidden]{display:none}
.phone-library-bar .vault-header,.phone-library-bar .topbar{position:static;margin:0;width:100%;max-width:none;height:auto;min-height:0;padding:4px 8px;gap:6px;border:0;border-radius:0;box-shadow:none}
.phone-library-bar .vault-header{display:flex;flex-wrap:nowrap;justify-content:space-between}
.phone-library-bar .brand,.phone-library-bar .brand h1{padding:0;margin:0}
.phone-library-bar .brand h1{font:750 clamp(25px,7vw,31px)/1.1 system-ui;letter-spacing:-.04em}
.phone-library-bar .brand :is(.brand-star,.version,p){display:none}
.phone-library-bar .vault-header-tools,.phone-library-bar .history-tools,.phone-deck-actions{display:flex;align-items:center;flex-wrap:nowrap;gap:4px;margin:0}
.phone-library-bar .btn{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:28px;height:30px;min-height:0;padding:3px 6px;border-radius:7px;font:600 12px/1.1 system-ui;white-space:nowrap}
.phone-library-bar .btn[data-act=vaultSettings]{width:30px;height:30px;font-size:20px!important;padding:0!important}
.phone-library-bar .history-tools .btn{width:28px;padding:0;font-size:16px}
.phone-fold{display:block;margin:0 auto;width:60px;height:20px;padding:0;background:var(--theme-rail);border:1px solid var(--line);border-radius:9px 9px 0 0;color:var(--accent);line-height:16px}
:is(.phone-vault-filters,.edit-screen .deck-search-head,.edit-screen .album-sort) .search-box{margin:0;padding:0;min-width:0;width:100%;max-width:none}
:is(.phone-vault-filters,.edit-screen .deck-search-head,.edit-screen .album-sort) .search-box label{display:block;font-size:0;line-height:0;margin:0;width:100%;max-width:none}
:is(.phone-vault-filters,.edit-screen .deck-search-head,.edit-screen .album-sort) .search-input-wrap{display:block;margin:0}
:is(.phone-vault-filters,.edit-screen .deck-search-head,.edit-screen .album-sort) .search-box input{width:100%;height:32px;min-height:0;margin:0;padding:4px 29px 4px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);font:16px/1.1 system-ui;color:var(--text)}
:is(.phone-vault-filters,.edit-screen .deck-search-head,.edit-screen .album-sort) .search-result:empty{display:none}
.phone-vault-filters{display:flex;align-items:center;gap:6px;margin:0 0 8px}
.phone-vault-filters .search-box{flex:1 1 0;width:auto}
.phone-vault-filters .history-tools{display:flex;gap:2px;margin:0}
.phone-vault-filters .history-tools .btn{width:28px;height:30px;padding:0}
.phone-vault-filters .vault-sort11{display:flex;align-items:center;gap:0;margin:0;padding:0;flex:none;border:1px solid var(--line);border-radius:8px;background:var(--panel2);overflow:hidden}
.phone-vault-filters .vault-sort11 label{font-size:0}
.phone-vault-filters select{max-width:100px;height:30px;margin:0;padding:2px 4px;font-size:13px;border:0;border-radius:0;background:transparent}
.phone-vault-filters #sortVaults11{font-size:0;position:relative;width:30px;min-height:0;height:30px;margin:0;padding:0;border:0;border-left:1px solid var(--line);border-radius:0;background:transparent;color:var(--accent)}
.phone-vault-filters #sortVaults11::before{content:'✓';font-size:17px}
.vault-screen .vault-content{width:100%;max-width:none;margin:0;padding:8px 8px 80px}
.vault-screen .vault-write-dock{width:min(430px,calc(100% - 52px));bottom:calc(8px + env(safe-area-inset-bottom))}
.vault-screen .vault-write-dock .v9-quick{min-width:0;min-height:40px;border-radius:22px;padding:3px 5px 3px 12px;gap:4px;align-items:center}
.vault-screen .vault-write-dock textarea{min-width:0;height:32px;min-height:32px;padding:5px 2px;font:16px/22px system-ui}
.vault-screen .vault-write-dock .quick-send{height:32px;width:36px;border-radius:17px}
.v9-quick button.quick-send{display:grid;place-items:center;padding:0;line-height:0}
.v9-quick button.quick-send svg{display:block;width:23px;height:23px;margin:0}
.vault-screen .vault-grid{grid-template-columns:repeat(auto-fill,minmax(min(118px,100%),1fr));gap:8px;align-items:start}
.vault-screen .vault-grid :is(.vault-tile.sort-row,.new-vault-tile){aspect-ratio:3/4;width:100%;height:auto;min-height:0;max-height:none;max-width:none;padding:0;border-radius:12px}
.vault-grid .phone-vault-actions{position:absolute;z-index:6;inset:3px 3px auto;display:flex;justify-content:space-between;align-items:center;gap:1px}
.vault-grid .phone-vault-actions :is(button,.vault-corner){position:static;transform:none;margin:0}
.vault-grid .phone-vault-actions button{width:25px;height:26px;min-height:26px;min-width:0;padding:0;border-radius:6px}
.phone-vault-actions .vault-corner{order:1}
.vault-grid .vault-deck-count{top:32px;left:5px;transform:none;font-size:10px;background:#121517b5;border-radius:4px;padding:1px 3px}
.vault-grid .vault-caption{padding:18px 6px 3px}.vault-grid .vault-caption h2{font-size:14px;line-height:1.1;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vault-grid .vault-open-hint,.vault-grid .new-vault-tile small{display:none}
.vault-grid .new-vault-tile{gap:3px}.vault-grid .new-vault-tile span{font-size:32px}.vault-grid .new-vault-tile strong{font-size:13px}
.vault-grid .vault-share-row{display:block;padding:2px 4px 4px}.vault-grid .share-standard{width:100%;min-height:23px;font-size:10px;padding:2px 3px}
.vault-grid .resume-banner{height:27px;width:calc(100% - 8px);margin:0 4px 4px;padding:2px 4px;gap:4px}
.vault-grid .resume-banner>.thumb{width:16px;height:20px}.vault-grid .resume-banner small,.vault-grid .resume-banner em{display:none}.vault-grid .resume-banner b{font-size:10px}
.phone-library-bar .topbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:'back title actions'}
.phone-library-bar .back-btn{grid-area:back;width:33px;color:var(--accent);border:1px solid var(--accent);background:var(--panel2);font-size:21px}
.phone-library-bar h1{grid-area:title;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.phone-deck-actions{grid-area:actions}
html:has(.edit-screen),body:has(.edit-screen),.screen.edit-screen{overflow:hidden;overscroll-behavior:none}
.screen.edit-screen{display:flex;flex-direction:column;height:100%}
.edit-screen .edit-layout.album-layout{flex:1 1 0;width:100%;min-width:0;margin:0;min-height:0;padding:8px;gap:10px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
.edit-screen .deck-panel102{width:100%;flex:none;min-height:0;max-height:none;border-radius:14px;padding:7px 0 18px!important}
.edit-screen .deck-panel:not(.collapsed) .deck-search-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;margin:0 9px 5px}
.edit-screen .deck-search-head>[data-search-box]{grid-area:1/2}
.edit-screen .deck-section-label{font-size:15px}
.edit-screen .deck-strip-line{padding:0 7px}.edit-screen .deck-panel102 .sort-list{grid-template-columns:repeat(auto-fill,minmax(min(154px,100%),1fr));gap:7px}
.edit-screen .deck-panel102 :is(.deck-row,.deck-add-tile){height:108px;min-height:108px;border-radius:9px}
.edit-screen .deck-select{height:calc(100% - 32px);bottom:auto}
.edit-screen .deck-select>span:not(.thumb):not(.deck-card-count){padding:18px 7px 4px}.edit-screen .deck-select b{font-size:13px}
.edit-screen .deck-card-count{display:none}
.phone-deck-buttons{position:absolute;inset:auto 0 0;height:32px;display:flex;align-items:stretch;background:var(--theme-rail)}
.deck-panel .phone-deck-buttons :is(.icon-action,.drag-handle){position:static;display:grid;place-items:center;flex:1;min-width:0;width:auto;height:100%;padding:0;opacity:1;border-radius:0;color:var(--text);background:transparent;border:0;border-right:1px solid var(--line);font-size:16px}
.deck-panel .phone-deck-buttons svg{width:17px;height:17px}.deck-panel .phone-deck-buttons .deck-delete123{color:#e9a39b}
.edit-screen .deck-expand{margin:6px auto -11px}.edit-screen .deck-collapse{bottom:-8px;height:17px;line-height:12px}
.edit-screen .album-section{padding:0 8px 8px;border-radius:14px}
.edit-screen .album-card{--phone-caption-height:34px}
.edit-screen .album-card>.tile-caption{height:var(--phone-caption-height);padding:2px 7px;gap:4px}
.edit-screen .album-card .tile-caption .editable-name{min-width:0;font-size:12px;line-height:14px;font-style:italic;font-weight:500}
.edit-screen .album-card>.card-preview{bottom:var(--phone-caption-height)}
.edit-screen .album-card>.tile-actions{bottom:calc(var(--phone-caption-height) + 5px)}
.edit-screen .album-card>.card-share123{width:27px;height:28px;min-width:0;min-height:0;padding:0;display:grid;place-items:center}
.edit-screen .card-share123 svg{width:15px;height:15px}
.edit-screen .album-sort{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:5px;min-height:0;padding:8px 0;align-items:center}
.edit-screen .album-sort>div:first-child{grid-area:1/1;min-width:0}.edit-screen .album-sort .eyebrow{font-size:15px;letter-spacing:0;white-space:nowrap}.edit-screen .album-count{display:none}
.edit-screen .album-sort>[data-search-box]{grid-area:1/2;max-width:none;width:100%;margin:0}
.edit-screen .album-sort-controls{grid-area:1/3;display:flex;flex-wrap:nowrap;margin:0;gap:3px}
.edit-screen .album-sort-controls [hidden]{display:none!important}
.edit-screen .album-sort-controls .phone-sort-field{display:grid;place-items:center;position:relative;width:31px;height:32px;border:1px solid var(--line);border-radius:7px;background:var(--panel2);color:var(--accent);font-size:18px}
.phone-sort-field select{position:absolute;inset:0;width:100%;height:100%;min-width:0;margin:0;opacity:0;cursor:pointer}
.phone-sort-field:focus-within{outline:2px solid var(--accent)}.phone-sort-field svg{width:17px;height:17px}
.edit-screen .album-section .album-toolbar{margin-top:8px;padding-top:8px}
.edit-screen .album-toolbar .add-card-grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:5px}
.edit-screen .album-toolbar .add-card-grid>.add-card{width:auto;min-width:50px;flex:0 0 auto;height:32px;min-height:32px;max-height:none;gap:4px;padding:0 8px;border-radius:7px;white-space:nowrap}
.edit-screen .album-toolbar .add-card span{font-size:16px}.edit-screen .album-toolbar .add-card b{font-size:12px;letter-spacing:0}
.edit-screen .add-card-grid>.v9-quick{order:2;flex:0 0 100%!important;width:100%;min-width:0;height:36px;min-height:36px}
.edit-screen .v9-quick :is(.quick-text-button,.quick-send){height:32px;min-height:32px}
.edit-screen .v9-quick textarea{min-width:0;min-height:0;height:32px;padding:5px 7px;line-height:22px;font-size:16px}
@media(orientation:landscape){
 /* Safari already excludes its toolbar from 100dvh. Adding its bottom safe
    area as a second row left a blank strip below the navigation. */
 body:has(.v8-viewer){padding-inline:0}
 .v8-viewer .stage{left:env(safe-area-inset-left);right:env(safe-area-inset-right);bottom:var(--bar)}
 .v8-viewer .bottomnav{height:var(--bar);padding-bottom:0;border-radius:0}
 .v8-viewer .viewer-history{padding-inline:0}
}
@media(orientation:landscape) and (max-height:560px){
 .v8-viewer:not(.cinema-mode) .stage:not(.has-attached-notes) .matrix-grid{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr)}
 .v8-viewer[data-layout=wide] .stage:not(.has-attached-notes):has([data-slot="-1:0"]){--peek:clamp(12%,calc(36% - 54px),18%);--preview-track:calc(var(--peek) / .75)}
 .v8-viewer .matrix-top11{min-height:23px;height:23px;padding-block:0}.v8-viewer .matrix-bottom11{min-height:24px;height:24px;max-height:24px;padding:0 3px;display:flex;align-items:center}
 .v8-viewer .matrix-bar11 :is(.btn,.lock-btn){min-height:22px!important;height:22px!important;font-size:9px!important;padding:1px!important}
 .v8-viewer .current-cell .card-shell,.v8-viewer .recall-active12 .current-cell .card-shell{top:24px!important;bottom:24px!important;height:auto!important}
 .matrix-bar11 .matrix-number{top:0!important;min-height:21px!important;height:21px!important}
 .v8-viewer .zone-intro{max-height:66%;overflow:auto}
}

/* Keep floating tools inside the visual viewport, including Safari's keyboard. */
:root{--phone-visible-top:0px;--phone-visible-left:0px;--phone-visible-width:100vw;--phone-visible-height:100dvh}
.modal-backdrop{
 top:var(--phone-visible-top)!important;left:var(--phone-visible-left)!important;right:auto!important;bottom:auto!important;
 width:var(--phone-visible-width);height:var(--phone-visible-height);box-sizing:border-box;
 padding:6px max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left));
}
.modal-backdrop :is(.settings-dialog,.editor-modal){max-height:100%;min-height:0;margin:0}
.modal-backdrop .editor-modal{height:100%;display:flex;flex-direction:column}
.modal-backdrop .editor-body{min-height:0;flex:1;overflow:auto}
.modal-backdrop :is(input,textarea,select){font-size:16px}
dialog.picture-view124.has-picture-tools[open]{
 top:var(--phone-visible-top);left:var(--phone-visible-left);right:auto;bottom:auto;
 width:var(--phone-visible-width);height:var(--phone-visible-height);max-height:var(--phone-visible-height);
 padding:4px max(8px,env(safe-area-inset-right)) 4px max(8px,env(safe-area-inset-left));gap:4px;
 grid-template-rows:34px minmax(0,1fr) auto;
}
.picture-view124.has-picture-tools .picture-toolbar{min-height:0;padding:0 35px 0 0;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;gap:4px}
.picture-view124.has-picture-tools .picture-toolbar :is(button,select){flex:none;min-height:29px;height:29px;font-size:12px;padding:3px 6px}
.picture-view124.has-picture-tools .picture-view-close124{width:29px;height:29px;top:5px;right:max(8px,env(safe-area-inset-right));font-size:24px;border-radius:7px}
.picture-view124.has-picture-tools .picture-footer{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;gap:5px;min-width:0}
.picture-view124.has-picture-tools .picture-footer button{flex:none;min-height:29px;font-size:11px;padding:3px 6px}
.picture-view124 .picture-status{flex:none;white-space:normal;max-width:200px;font-size:11px}

.v8-viewer .phone-floating{min-height:0;max-height:none;min-width:0;max-width:none;border-radius:9px;display:flex;flex-direction:column;overflow:hidden;padding:0}
.v8-viewer .phone-floating :is(.note-heading,header){position:static;flex:none;min-height:29px;height:29px;padding:2px 5px;gap:4px;touch-action:none;cursor:grab}
.phone-floating :is(.note-heading .context-deck,header strong){font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;margin:0}
.phone-floating .note-handle{display:none}
.phone-floating :is(.note-heading,header) :is(button,.note-edit){position:static;flex:none;height:24px;min-height:0;width:25px;min-width:0;padding:1px;margin:0;font-size:19px;border-radius:5px}
.phone-floating .note-heading .note-edit{width:33px;font:700 9px/1 system-ui}
.phone-floating .note-edit::before{content:'EDIT'}
.phone-floating :is(.note-heading,header) svg{width:17px;height:17px}
.phone-floating>.context-info,.phone-floating>.companion-body12{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;padding:8px 10px 19px;font-size:14px}
.phone-floating>.context-info{cursor:text}
.phone-floating .phone-panel-resize{position:absolute;bottom:0;right:0;width:24px;height:22px;min-height:0;padding:0;border:0;border-radius:7px 0 0 0;touch-action:none;background:var(--panel2);color:var(--accent);font:18px/1 system-ui}
.v8-viewer .phone-info-editor{
 position:fixed;z-index:90;transform:none;bottom:auto;left:calc(var(--phone-visible-left) + max(6px,env(safe-area-inset-left)));
 top:calc(var(--phone-visible-top) + 3px);width:calc(var(--phone-visible-width) - max(6px,env(safe-area-inset-left)) - max(6px,env(safe-area-inset-right)));
 height:calc(var(--phone-visible-height) - 6px);max-height:none;min-height:0;padding:0;display:flex;flex-direction:column;overflow:hidden;border-radius:8px;
}
.phone-info-tools{display:flex;align-items:center;gap:5px;flex:none;height:30px;padding:1px 4px;background:#0a0e12}
.phone-info-tools strong{font-size:12px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phone-info-tools .history-tools{display:flex;gap:4px}
.phone-info-tools .btn{width:28px;height:27px;min-height:0;padding:0;display:grid;place-items:center;font-size:21px}
#phoneDraftRedo svg{transform:scaleX(-1)}
.phone-info-editor #activeInfoDraft{height:0;min-height:0;flex:1;resize:none;margin:0;padding:9px;border:0;border-radius:0;line-height:1.4;font:16px/1.4 system-ui;box-shadow:none;overscroll-behavior:contain}
.v8-viewer:has(.phone-info-editor) :is(.companion-panel12,.viewer-history){visibility:hidden}

/* Slim dark rails keep the Matrix visually in front. The safe inset belongs to
   the buttons; the rail itself still reaches the physical screen edge. */
.v8-viewer{--bar:29px;--phone-rail:#080c10}
.v8-viewer .viewer-history,.v8-viewer .bottomnav{background:var(--phone-rail);box-sizing:border-box}
.v8-viewer :is(.viewer-history,.bottomnav) .matrix-arrow.deck-banner111{background:color-mix(in srgb,var(--accent) 38%,#080c10)}
.v8-viewer :is(.viewer-history,.bottomnav) .matrix-arrow.deck-banner111::before{background:var(--phone-rail)}
.v8-viewer .viewer-history{padding-inline:5px}
.v8-viewer .viewer-history button{height:25px}
.v8-viewer .phone-matrix-options .matrix-settings11{width:25px;height:25px;font-size:20px}
.v8-viewer .bottomnav>:is([data-act=vaultBtn],[data-act=deckBtn]){height:24px}
.v8-viewer[data-layout=wide]:not(.cinema-mode) .stage:not(.has-attached-notes) .matrix-window{container-type:size;touch-action:none}
.v8-viewer[data-layout=wide]:not(.cinema-mode) .stage:not(.has-attached-notes) .matrix-grid{transform:scale(var(--phone-matrix-zoom,1))!important;transform-origin:center}
@media(orientation:landscape){
 .v8-viewer .viewer-history{padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right))}
 .v8-viewer .bottomnav{padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right))}
 .v8-viewer[data-layout=wide]:not(.cinema-mode) .stage:not(.has-attached-notes) .matrix-grid{
   width:min(100%,360cqh)!important;margin-inline:auto;grid-template-columns:repeat(3,minmax(0,1fr));
 }
 .v8-viewer[data-layout=wide] .stage:not(.has-attached-notes):has([data-slot="-1:0"]){--peek:12%;--preview-track:16%}
}

/* Recall needs a usable editor even in a short landscape viewport. */
.v8-viewer .stage.recall-active12:not(.has-attached-notes) .matrix-grid{grid-template-rows:0 minmax(0,1fr) 0!important;row-gap:0;transform:none!important}
.v8-viewer .stage.recall-active12 .neighbor-cell{visibility:hidden}
.v8-viewer .stage.recall-active12 .matrix-bottom11{height:26px!important;min-height:26px!important;max-height:26px!important;display:flex;justify-content:center}
.v8-viewer .stage.recall-active12 .current-cell .card-shell{bottom:27px!important}
.v8-viewer .matrix-bottom11.phone-recall-controls .phone-recall-stop{max-width:170px;flex:0 1 170px;margin-inline:auto;align-self:center}
.v8-viewer .recall-veil12{padding:5px 8px;border-width:1px;border-radius:8px;box-shadow:inset 0 0 20px #0005;overflow:auto}
.v8-viewer .recall-veil12:before,.v8-viewer .recall-veil12:after,.v8-viewer .recall-question12{display:none}
.v8-viewer .veil-scroll12{height:100%;display:flex;flex-direction:column;min-height:0;max-width:none}
.v8-viewer .recall-veil12 h2{font-size:12px;line-height:1.2;margin:0 0 3px}
.v8-viewer .recall-poem12{flex:none;font-size:12px;line-height:1.2;margin:2px 0 4px}
.v8-viewer #recallForm12{flex:1;min-height:0;display:flex;flex-direction:column;gap:3px}
.v8-viewer #recallAnswer12{height:0;min-height:55px;flex:1;font:16px/1.3 system-ui;padding:5px;resize:none}
.v8-viewer #recallForm12 small{display:none}
.v8-viewer #recallForm12 .btn{flex:none;align-self:center;margin:0;height:25px;min-height:25px;padding:1px 12px;font-size:12px}
.v8-viewer[data-layout] .stage:has(.recall-veil12:focus-within) .matrix-window{
 position:fixed;z-index:60;right:auto!important;bottom:auto!important;
 left:calc(var(--phone-visible-left) + max(6px,env(safe-area-inset-left)))!important;top:calc(var(--phone-visible-top) + 2px)!important;
 width:calc(var(--phone-visible-width) - max(6px,env(safe-area-inset-left)) - max(6px,env(safe-area-inset-right)))!important;
 height:calc(var(--phone-visible-height) - 4px)!important;max-width:none!important;overflow:hidden;container-type:normal;
}
.v8-viewer[data-layout] .stage:has(.recall-veil12:focus-within) .matrix-grid{transform:none!important;display:block!important;width:100%!important;height:100%!important;margin:0!important}
.v8-viewer[data-layout] .stage:has(.recall-veil12:focus-within) .current-cell{position:absolute;inset:0;width:100%!important;max-width:none!important;height:100%!important}
.v8-viewer[data-layout] .stage:has(.recall-veil12:focus-within) :is(.matrix-top11,.recall-veil12 h2,.recall-poem12){display:none}
.v8-viewer[data-layout] .stage:has(.recall-veil12:focus-within) .current-cell .card-shell{top:1px!important}

/* The active Card keeps its full image height. Its former top/bottom controls
   occupy narrow side rails, above the sleeve but outside the content area. */
.v8-viewer .phone-side-actions{--phone-action-size:36px;--phone-action-rail:40px}
.v8-viewer .stage:not(.recall-active12) .phone-side-actions>.matrix-bar11{
 inset:3px auto 3px 2px;width:var(--phone-action-rail);height:auto!important;min-height:0!important;max-height:none!important;
 display:flex!important;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:4px;
 padding:1px 2px!important;border:0;background:none!important;box-shadow:none;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;z-index:8!important;
}
.v8-viewer .stage:not(.recall-active12) .phone-side-actions>.matrix-bottom11{left:auto;right:2px}
.v8-viewer .stage:not(.recall-active12) .phone-side-actions>.matrix-bar11::before{content:none!important}
.v8-viewer .stage:not(.recall-active12) .phone-side-actions>.matrix-bar11>button{
 flex:0 0 var(--phone-action-size)!important;width:var(--phone-action-size)!important;min-width:var(--phone-action-size)!important;max-width:none!important;
 height:var(--phone-action-size)!important;min-height:var(--phone-action-size)!important;margin:0;padding:6px!important;
 border-radius:7px;background:color-mix(in srgb,var(--theme-rail) 95%,#000);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--theme-rail));
}
.v8-viewer .stage:not(.recall-active12) .phone-side-actions>.matrix-bar11>button.active,
.v8-viewer .stage:not(.recall-active12) .phone-side-actions>.matrix-bar11>button[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 22%,var(--theme-rail));border-color:var(--accent)}
.phone-action-icon svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.phone-action-icon.phone-edit::before{content:none}
.v8-viewer .stage:not(.recall-active12) .phone-side-actions>.matrix-top11>.matrix-number{
 position:static!important;flex:0 0 auto;margin-top:auto;min-width:0!important;width:100%!important;height:22px!important;min-height:22px!important;
 padding:2px!important;font-size:9px;line-height:16px;border-radius:5px;
}
.v8-viewer[data-layout] .stage:not(.recall-active12) .phone-side-actions>.card-shell{
 inset:3px calc(var(--phone-action-rail) + 4px)!important;width:auto!important;height:auto!important;
}
@media(orientation:landscape){.v8-viewer .phone-side-actions{--phone-action-size:32px;--phone-action-rail:36px}}
@media(orientation:portrait){
 .v8-viewer[data-layout=deck]:not(.cinema-mode) .stage:not(.has-attached-notes) .matrix-grid{
   height:clamp(min(170px,100%),calc((var(--phone-track) - 88px) / var(--phone-photo-ratio,.82) + 6px),100%);
 }
}
/* Keep the dedicated Braindance writing view and its bottom-center Stop action. */
.v8-viewer .stage.recall-active12 .phone-side-actions>.matrix-top11{display:none}
.v8-viewer[data-layout] .stage.recall-active12 .phone-side-actions>.card-shell{top:2px!important;left:2px!important;right:2px!important}