/* Selection is attached to the image, not a bulky rectangle around image and caption. */
#panel .study-card .effect-card,#panel .study-card .effect-card.on{padding:0;border:0;background:transparent;box-shadow:none;border-radius:16px;width:100%;overflow:visible}
#panel .study-card{gap:0;min-width:0}#panel .study-card .effect-card canvas{width:100%;aspect-ratio:8/5;height:auto;border:1px solid color-mix(in srgb,var(--ui-line) 65%,transparent);border-radius:14px;box-shadow:0 2px 8px #172c3110;outline:2px solid transparent;outline-offset:-2px;transition:outline-color 180ms ease}
#panel .study-card .effect-card.on canvas{outline-color:var(--ui-accent)}#panel .study-card .effect-card strong{display:flex;align-items:center;justify-content:space-between;min-height:30px;margin:6px 2px 0;font-size:12px;line-height:1.4;font-weight:500}
#panel .study-card .effect-card.on strong{font-weight:650}#panel .study-card .effect-card.on strong:after{content:'';width:5px;height:5px;border-radius:50%;background:var(--ui-accent);margin-inline:8px;flex:none}
#panel .study-card .example-link{min-height:36px;margin:4px 0 0;padding:6px 2px;text-align:left;color:var(--ui-muted);font-size:11px}
/* Both canvas utilities share one baseline and the same forty-pixel surface. */
.workspace .canvas-ratio{position:absolute;right:12px;bottom:8px;width:40px!important;height:40px!important;min-height:40px!important;margin:0;padding:9px;display:grid;place-items:center;border:1px solid var(--ui-line);border-radius:14px;background:linear-gradient(145deg,var(--ui-glass),var(--ui-chrome));box-shadow:inset 0 1px 0 #ffffff50,0 3px 10px #18313912}
.view-toolbar{height:40px;min-height:40px;background:linear-gradient(145deg,var(--ui-glass),var(--ui-chrome));box-shadow:inset 0 1px 0 #ffffff50,0 3px 10px #18313912}.view-toolbar button{height:32px;min-height:32px}.view-entry:before,.view-entry:after{content:none!important}.view-entry svg{width:17px;height:17px;stroke-width:1.6}.view-entry span{min-width:24px;text-align:left}
/* A magnified photograph meets the tools on a straight edge. */
#app:has(.workspace.view-magnified) #panel{border-radius:0!important;clip-path:inset(0)!important;box-shadow:none!important}
#app{position:relative;isolation:isolate}.ambient-light{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}.ambient-orb{display:block;position:absolute;inset:-12%;background:radial-gradient(ellipse at 27% 26%,color-mix(in srgb,var(--ui-chrome) 85%,white) 0,transparent 47%),radial-gradient(ellipse at 77% 55%,color-mix(in srgb,var(--ui-accent) 15%,transparent),transparent 55%);opacity:.8;transition:transform 400ms cubic-bezier(.2,.7,.2,1)}
.panel-edge{position:absolute;z-index:15;height:28px;pointer-events:none;opacity:0;border-radius:26px 26px 0 0;overflow:hidden;background:linear-gradient(to bottom,var(--ui-chrome) 0%,color-mix(in srgb,var(--ui-chrome) 88%,transparent) 36%,transparent);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);mask-image:linear-gradient(#000,transparent);transition:opacity 180ms ease}
.panel-edge.on{opacity:1}#app:has(.workspace.view-magnified) .panel-edge{border-radius:0}#app.typing .panel-edge,#app.no-photo .panel-edge{display:none}
.soft-scroll{mask-image:linear-gradient(to bottom,transparent,#000 18px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18px)}
@media(prefers-reduced-motion:reduce){.ambient-orb,.panel-edge,#panel .study-card .effect-card canvas{transition:none!important}}
/* Full-screen atmosphere: the logo and both light layers use one clock. */
.launch{background:var(--launch-bg,var(--ui-chrome,#edf0e9))}.launch:before{display:none!important}.launch-mark,.launch-title{position:relative;z-index:1}
.launch-atmosphere{position:absolute;inset:-12%;pointer-events:none;overflow:hidden;z-index:0;background:linear-gradient(138deg,color-mix(in srgb,var(--launch-bg,#edf0e9) 90%,white),var(--launch-bg,#edf0e9));opacity:1}
.launch-aura{position:absolute;inset:0;transform-origin:50% 50%}.launch-aura.cool{background:radial-gradient(ellipse at 40% 42%,color-mix(in srgb,var(--ui-glow,#fff5d8) 62%,transparent),transparent 53%),radial-gradient(ellipse at 22% 22%,#a5a2df38,transparent 55%);opacity:.65}
.launch-aura.warm{background:radial-gradient(ellipse at 58% 56%,#f4c3a155,transparent 52%),linear-gradient(120deg,transparent 25%,#fff7e649 47%,transparent 67%);opacity:.15}
[data-theme=ink] .launch-aura.cool{background:radial-gradient(ellipse at 40% 42%,#8a8cc538,transparent 53%),radial-gradient(ellipse at 22% 22%,#8aaeb629,transparent 55%)}[data-theme=ink] .launch-aura.warm{background:radial-gradient(ellipse at 58% 56%,#bc8e6530,transparent 52%),linear-gradient(120deg,transparent 25%,#ede4c714 47%,transparent 67%)}
@media(max-width:819px){#app.browse-photo #panel{padding:12px 20px}#app.browse-photo #panel>.panel-head,#app.browse-photo #panel>.note{display:none}#app.browse-photo #panel .browse-tabs{margin-bottom:8px!important;padding:0 1px}#app.browse-photo #panel .browse-tabs button{min-height:36px;padding:6px 12px}#app.browse-photo #panel .effect-strip{padding:2px 1px 4px}#app.browse-photo #panel .study-card strong{min-height:24px}#app.browse-photo #panel .study-card .example-link{min-height:28px;margin-top:2px;padding:4px 2px}}

.start-example-picture img{top:0;right:0;width:100%;height:100%;transform:none;object-fit:cover;object-position:center 40%}

.start-example-picture img{top:0;right:0;width:100%;height:100%;transform:none;object-fit:cover;object-position:center 40%}

.start-example-picture img{top:0;right:0;width:100%;height:100%;transform:none;object-fit:cover;object-position:center 40%}

.start-example-picture img{top:0;right:0;width:100%;height:100%;transform:none;object-fit:cover;object-position:center 40%}

.start-example-picture img{top:0;right:0;width:100%;height:100%;transform:none;object-fit:cover;object-position:center 40%}

.start-example-picture img{top:0;right:0;width:100%;height:100%;transform:none;object-fit:cover;object-position:center 40%}

.start-example-picture img{top:0;right:0;width:100%;height:100%;transform:none;object-fit:cover;object-position:center 40%}

#app.no-photo .canvas-ratio,#app.no-photo .view-toolbar,.workspace .canvas-ratio[hidden]{display:none!important}

/* Edge-to-edge comparison images; their own imagery supplies the separation. */
.example-gallery img{height:auto;aspect-ratio:auto;object-fit:contain;background:none;border:0!important;border-radius:12px;box-shadow:none;padding:0;outline:0}
.palette-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:3px 0 12px}.palette-option{display:flex;align-items:center;gap:9px;min-width:0;min-height:48px;padding:8px 10px;border:1px solid transparent;border-radius:12px;background:color-mix(in srgb,var(--ui-chrome) 60%,var(--ui-tint));font-size:11px;text-align:left;box-shadow:none;transition:background-color 160ms,border-color 160ms}.palette-option[aria-pressed=true]{background:var(--ui-tint);border-color:var(--ui-accent)}.palette-colors{display:flex;width:52px;height:25px;overflow:hidden;border-radius:7px;flex:none}.palette-colors i{flex:1;min-width:0}.palette-option>span:last-child{min-width:0;line-height:1.35}@media(max-width:359px){.palette-option{padding:7px;gap:6px;font-size:10px}.palette-colors{width:42px;height:24px}}

.start-example-picture img{top:0;right:0;width:100%;height:100%;transform:none;object-fit:cover;object-position:center 40%}
.palette-custom-entry{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:40px;border-radius:12px;border:1px solid var(--ui-line);background:transparent;font-size:12px;margin:2px 0 12px}.palette-custom-entry svg{width:16px;height:16px}.palette-personal{display:grid;gap:7px;margin:10px 0 12px}.palette-saved-row{display:flex;gap:6px;align-items:stretch}.palette-saved-row>.palette-option{flex:1;min-width:0}.palette-remove{width:38px;flex:none;padding:8px;border:0;background:transparent;border-radius:10px;color:var(--ui-muted)}.palette-remove svg{width:17px;height:17px}
.palette-editor{width:min(92vw,460px);max-height:calc(100dvh - 24px);padding:18px;border:1px solid var(--ui-line);border-radius:24px;background:var(--ui-chrome);color:var(--ui-ink);box-shadow:0 24px 80px #0005;overflow:hidden}.palette-editor[open]{display:flex;flex-direction:column;gap:14px}.palette-editor::backdrop{background:#14253170;backdrop-filter:blur(7px)}.palette-editor>header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}.palette-editor h2{font-size:16px;font-weight:600;margin:0}.palette-editor>header button{min-height:36px;border-radius:12px;font-size:12px}.palette-editor-content{overflow:auto;overscroll-behavior:contain;scrollbar-width:none;min-height:0;display:flex;flex-direction:column;gap:12px}.palette-slots{display:flex;gap:6px;flex:none}.palette-slot{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;gap:5px;border:1px solid transparent;background:transparent;border-radius:12px;padding:7px 2px;font-size:10px}.palette-slot[aria-pressed=true]{border-color:var(--ui-accent);background:var(--ui-tint)}.palette-slot i{width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 1px var(--ui-line)}.palette-mixer{display:grid;grid-template-columns:144px minmax(0,1fr);align-items:center;gap:12px;flex:none}.palette-mixer canvas{width:144px;height:144px;touch-action:none;display:block}.palette-ranges{display:grid;gap:15px;min-width:0}.palette-ranges label{display:grid;gap:6px;font-size:11px}.palette-ranges input{width:100%;min-width:0}.palette-hex,.palette-name{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px;font-size:11px;flex:none}.palette-editor input:not([type=range]){min-height:40px;min-width:0;width:100%;padding:8px 11px;font-size:16px;color:var(--ui-ink);background:var(--ui-glass);border:1px solid var(--ui-line);border-radius:11px}.palette-editor>footer{display:grid;grid-template-columns:1fr 1fr;gap:9px;flex:none}.palette-editor>footer button{min-height:42px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:12px}.palette-editor>footer .primary{border:0}.palette-editor button:focus-visible,.palette-mixer canvas:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}@media(max-width:359px){.palette-editor{padding:14px}.palette-mixer{grid-template-columns:120px minmax(0,1fr);gap:10px}.palette-mixer canvas{width:120px;height:120px}.palette-slot i{width:23px;height:23px}}