.app-context{position:absolute;left:50%;transform:translateX(-50%);top:19px;color:#eee;font:8px var(--mono);letter-spacing:.1em;background:#333335;padding:6px 13px;border-radius:4px;white-space:nowrap}.editor-page .app-top{position:relative}.editor-page .app-top>a.app-icon{text-decoration:none;display:grid;place-items:center;font:18px var(--mono)}
.library-categories{display:flex;align-items:center;gap:24px;overflow-x:auto;white-space:nowrap;padding:13px 8px 11px;margin-top:8px;background:linear-gradient(180deg,#272729,#1e1e20);scrollbar-width:none}.library-categories::-webkit-scrollbar{display:none}.library-categories button{border:0;background:none;color:#88898d;font:9px var(--mono);cursor:pointer;padding:1px 0}.library-categories button:first-child{font-size:19px}.library-categories button.active{color:#f0b32d}.camera-carousel{padding-top:10px}.camera-choice{flex-basis:75px}.mini-camera{width:50px;height:37px;border-radius:4px;background:linear-gradient(135deg,#aaa8a0,#34363a 52%,#777873);border-color:#666}.mini-camera b{width:19px;height:19px;left:14px;top:7px}.cam-polaroid{width:44px;height:41px;background:linear-gradient(#c5a87b 0 21%,#292a2b 21% 70%,#b4a078 70%)}.cam-2014{background:linear-gradient(#253248,#6fa8e3 45%,#d5d3ca 46%)}.cam-2014 b{width:9px;height:4px;left:17px;top:27px;border-radius:1px}.cam-2000s{width:37px;background:linear-gradient(#1d1e20,#4c79ad 55%,#212326 56%)}.cam-2000s b{width:25px;height:18px;left:4px;top:4px;border-radius:1px;background:linear-gradient(#a6d8ff,#3774ae)}.cam-bluefilm{background:linear-gradient(135deg,#12b6d4,#1b3337 51%,#168aa0)}.cam-computer{width:48px;background:#c6b996}.cam-computer b{width:31px;height:21px;left:6px;top:4px;border-radius:2px;background:linear-gradient(135deg,#152450,#427aca)}.cam-action{width:51px;border-radius:9px;background:#212426}.cam-bigshot{background:linear-gradient(#79614d,#252629 55%,#464144)}.cam-booth{background:linear-gradient(#ad8058,#433629)}.cam-dispo,.cam-a40{background:linear-gradient(135deg,#ddd0b8,#8d7061)}.cam-grf,.cam-f100{background:linear-gradient(135deg,#51504b,#171819 52%,#76746c)}.cam-original{background:linear-gradient(135deg,#e2dbca,#9e9a8a)}.cam-inst{background:linear-gradient(135deg,#e2c5c7,#a77b80)}.cam-cx{background:linear-gradient(135deg,#d9d8d1,#777977)}.cam-u400,.cam-sipic,.cam-u7040,.cam-ixus,.cam-zr,.cam-z30{background:linear-gradient(135deg,#cec9ac,#555845)}
.bottom-tools{display:flex;justify-content:space-around;align-items:center;height:43px;margin-top:10px;border-top:1px solid #323234;color:#77787a}.bottom-tools button{position:relative;border:0;background:none;color:inherit;font:20px var(--mono);cursor:pointer;min-width:38px;height:35px}.bottom-tools button.tool-active{color:#eee}.bottom-tools button:hover{color:var(--amber)}.bottom-tools small{position:absolute;top:-3px;right:-5px;padding:2px 4px;background:#dae9f2;color:#425466;font:6px var(--mono);transform:rotate(-7deg)}.bottom-controls{height:108px}.camera-row-label{gap:8px}.camera-row-label div{white-space:nowrap}.camera-row-label button{font:6px var(--mono)}.camera-row-label #savePhotoBtn{margin-left:9px;color:var(--amber)}.camera-row-label #savePhotoBtn:disabled{opacity:.35;cursor:not-allowed}.video-timeline{padding:0 7px 7px;background:#18181a;color:#c7c7ca}.video-timeline[hidden]{display:none}.timeline-actions{display:flex;align-items:center;gap:8px;height:34px;font:8px var(--mono)}.timeline-actions button{border:0;background:none;color:#c7c7ca;font:14px var(--mono);padding:2px;cursor:pointer}.timeline-actions input{flex:1;min-width:30px;accent-color:#b7b8bb;height:3px}.timeline-actions span{white-space:nowrap}.video-mode .camera-date{display:none}.video-mode .app-context{color:#f1c351}.video-mode .viewfinder{filter:saturate(.94)}
@media(max-width:560px){.library-categories{gap:20px;padding-left:6px}.camera-choice{flex-basis:67px}.mini-camera{height:34px}.bottom-tools{height:39px;margin-top:7px}.bottom-tools button{font-size:18px;min-width:34px}.bottom-controls{height:101px}.camera-row-label{font-size:6px}.camera-row-label button{font-size:5px;margin-left:2px!important}.app-context{top:15px}.timeline-actions{gap:5px}}

/* Reference pass: mobile editor uses the app surface; desktop keeps site chrome. */
@media(max-width:560px){
  .editor-page{min-height:100dvh;background:#171719;background-image:radial-gradient(ellipse at 50% 22%,#29292b 0,#1b1b1d 60%,#111112 100%)}
  .editor-head,.editor-footer,.editor-legal{display:none}
  .camera-app{width:100%;margin:0;padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
  .app-hardware{min-height:100dvh;padding:max(7.5dvh,env(safe-area-inset-top,0)) 8.5% max(4dvh,env(safe-area-inset-bottom,0));border:0;border-radius:0;background:linear-gradient(145deg,#29292b 0%,#1c1c1e 27%,#252527 72%,#151517 100%);box-shadow:inset 0 0 32px #0008}
  .app-hardware:before{inset:7px;border:1px solid #ffffff09;border-radius:22px}
  .app-top{height:38px;padding-bottom:9px}
  .app-live{top:calc(17px + env(safe-area-inset-top,0))}
  .viewfinder-wrap{padding:6px;border-radius:17px;border-color:#4a4a4d;box-shadow:inset 0 0 0 2px #252527,0 4px 15px #0008}
  .viewfinder{height:min(calc(58.8dvh - 14px),480px);min-height:330px;border-radius:11px}
  .app-controls{padding:14px 2px 0}
  .mode-row{gap:6px}
  .library-categories{gap:20px;padding:13px 8px 11px;margin-right:-2px;margin-left:-2px}
  .camera-carousel{gap:10px;padding:11px 3px 13px;scrollbar-width:none}
  .camera-carousel::-webkit-scrollbar{display:none}
  .camera-choice{flex-basis:66px;gap:6px}
  .mini-camera{height:39px;width:52px;box-shadow:0 4px 7px #0009,inset 0 1px 1px #ffffff66}
  .mini-camera b{width:19px;height:19px;top:8px;left:15px}
  .effect-head{margin:11px 0 12px}
  .effect-carousel{gap:8px;overflow-x:auto;justify-content:flex-start;padding:0 3px 5px;scrollbar-width:none}
  .effect-carousel::-webkit-scrollbar{display:none}
  .effect-choice{flex:0 0 57px;min-width:57px}
  .effect-icon{width:42px;height:42px}
  .bottom-tools{height:42px;margin:8px -2px 0;border-top-color:#373739}
  .bottom-tools button{font-size:19px;min-width:37px}
  .bottom-controls{height:16dvh;min-height:104px;max-height:142px;grid-template-columns:1fr 90px 1fr;position:relative}
  .small-preview{position:absolute;left:0;top:25%;width:19vw;height:9dvh;margin-left:0}
  .shutter{width:min(10.4dvh,94px);height:min(10.4dvh,94px);grid-column:2;grid-row:1}
  .shutter i{width:79%;height:79%}
  .gallery-button{position:absolute;right:0;top:16%;width:19vw;height:9dvh;margin-right:0}
  .capture-switch{position:absolute;left:50%;bottom:-2dvh;transform:translateX(-50%)}
  .camera-row-label{font-size:6px}
  .camera-row-label button{font-size:5px;margin-left:2px!important}
  .camera-row-label div{display:flex;gap:4px}
  .app-context{top:15px}
  .timeline-actions{gap:5px}
}

/* Artwork cropped from the supplied ProCCD reference screenshots. */
.editor-page{--pixel:'Silkscreen','Courier New',monospace}
.app-context,.mode-pill,.mode-selected,.camera-choice span,.effect-choice span,.library-categories button,.effect-head span,.bottom-tools button,.camera-row-label,.camera-row-label button,.camera-date,.timeline-actions{font-family:var(--pixel)}
.camera-asset{width:62px;height:55px;object-fit:contain;display:block;border:0;border-radius:5px}
.image-effect-icon{padding:0;border:0;object-fit:cover;box-shadow:none;background:none}
.flatzip-skin .overlay-top{height:37px;margin:8px 9px 0;padding:0 11px;border-radius:8px;color:#f4f8ff;background:linear-gradient(180deg,#91ccff,#3e8be0 58%,#1d69c7);text-shadow:0 1px 2px #173d70}
.flatzip-skin .overlay-top button{color:#fff;background:#3e8be0;border-color:#d8edff}
.flatzip-skin .overlay-bottom{height:46px;justify-content:space-between;padding:0 14px;background:linear-gradient(180deg,#78b8f8,#307ed1 56%,#155cae);border-radius:0 0 9px 9px}
.flatzip-skin .overlay-bottom button{font-size:13px;text-shadow:0 1px 2px #123b69}
.flatzip-skin .overlay-bottom #timerBtn{font-weight:700;font-size:16px;letter-spacing:.03em}
.flatzip-skin .camera-date{display:none}
.viewfinder:not(.has-photo) video,.viewfinder:not(.has-photo) .demo-view{filter:var(--preview-filter,none)}
.viewfinder .camera-date{display:none}
.viewfinder.date-enabled .camera-date{display:block}
.camera-choice{position:relative}
.favorite-toggle{position:absolute;top:-5px;right:4px;z-index:2;color:#f1ba3f;text-shadow:0 1px 3px #000;font:12px/1 Arial,sans-serif;opacity:.5;cursor:pointer;touch-action:manipulation}
.favorite-toggle[aria-pressed="true"]{opacity:1}
.small-preview .camera-asset{width:54px;height:43px;object-fit:contain}
.small-preview .mini-camera{width:43px;height:29px;transform:scale(.86)}
@media(max-width:560px){.camera-asset{width:57px;height:50px}.flatzip-skin .overlay-top{margin:7px 7px 0}.flatzip-skin .overlay-bottom{height:44px;padding:0 11px}}

/* Mobile camera view tuned to the supplied ProCCD camera screen references. */
@media(max-width:560px){
  .editor-page{background:#171719;background-image:radial-gradient(ellipse at 50% 17%,#29292b 0,#1c1c1e 58%,#111112 100%)}
  .app-hardware{background-color:#202022;background-image:radial-gradient(ellipse at 50% 35%,#ffffff08 0 1px,transparent 2px),radial-gradient(ellipse at 20% 80%,#ffffff05 0 1px,transparent 2px),linear-gradient(145deg,#29292b 0%,#1c1c1e 27%,#252527 72%,#151517 100%);background-size:5px 5px,7px 7px,auto}
  .app-icon#settingsTopBtn{font-size:0;position:relative}
  .app-icon#settingsTopBtn:after{content:'⚙';font:17px Arial,sans-serif;color:#e4e4e6}
  .app-context{display:none}
  .library-categories,.bottom-tools{display:none}
  .drawer-grip{height:17px;width:100%;display:flex;align-items:center;justify-content:center;margin:-3px 0 2px;border:0;background:transparent;padding:0;cursor:grab}
  .drawer-grip i{width:48px;height:3px;border-radius:4px;background:linear-gradient(#77777a,#49494c);box-shadow:0 1px 2px #000}
  .app-controls{padding-top:0}
  .drawer-grip,.mode-row,.camera-carousel,.effect-head,.effect-carousel{display:none}
  .camera-carousel{border-bottom:0;padding-bottom:7px}
  .effect-head{margin:7px 0 9px}
  .effect-carousel{padding-bottom:1px}
  .bottom-controls{height:16dvh;min-height:104px;max-height:142px;margin-top:0}
  .editor-page.drawer-expanded .drawer-grip,.editor-page.drawer-expanded .mode-row,.editor-page.drawer-expanded .camera-carousel,.editor-page.drawer-expanded .effect-head,.editor-page.drawer-expanded .effect-carousel{display:flex}
  .editor-page.drawer-expanded .effect-head{display:flex}
  .editor-page.drawer-expanded .bottom-controls{display:none}
  .editor-page.drawer-expanded .app-controls{padding-top:2px}
  .editor-page.drawer-expanded .app-controls{background:linear-gradient(180deg,#353335 0%,#282729 18%,#1d1d1f 100%);border-radius:19px 19px 0 0;padding-left:8px;padding-right:8px;box-shadow:0 -7px 22px #0009}
  .editor-page.drawer-expanded .camera-carousel{display:flex}
  .editor-page.drawer-expanded .mode-row{display:flex}
  .app-top{height:42px}
  .viewfinder{height:min(calc(58.8dvh - 14px),480px);min-height:330px}
  .viewfinder-wrap{touch-action:pan-y}
  .editor-page .demo-view{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 50%,#0d0d0f,#020203 73%);}
  .editor-page .demo-view:after{background-image:radial-gradient(#ffffff10 .6px,transparent .8px);background-size:4px 4px;opacity:.36;mix-blend-mode:screen}
  .editor-page .demo-sun,.editor-page .demo-land{display:none}
  .editor-page .demo-copy{position:relative;inset:auto;text-align:center;color:#96969a;font:24px var(--pixel);letter-spacing:.02em;text-shadow:0 0 7px #d3d3d355,0 0 18px #ddd5;z-index:1}
  .editor-page .demo-copy small{display:none}
  .focus-frame{display:none}
  .viewfinder.with-frame .focus-frame{display:block}
  .camera-row-label{display:none;margin-top:1px}
  .editor-page.photo-ready .camera-row-label{display:flex}
}
@media(max-height:760px) and (max-width:560px){
  .viewfinder{height:50dvh;min-height:290px}
  .camera-carousel{padding-top:7px;padding-bottom:4px}
  .effect-head{margin:5px 0 6px}
  .effect-icon{width:36px;height:36px}
  .bottom-controls{height:16dvh;min-height:94px;max-height:118px}
  .shutter{width:min(10.4dvh,82px);height:min(10.4dvh,82px)}.shutter i{width:79%;height:79%}
}