/* A removable home skin. Canvas and standalone generation views keep their theme. */
body.studio-shell:has(#pane-home:not([hidden])){
  --bg:#f4f4f5;--surf:#fcfcfd;--hole:#e9eaed;--line:#d4d7dc;
  --fg:#272b30;--dim:#606771;--ph:#606771;
  --acc:#34383e;--acc-d:#24282d;--soft:#e3e5e9;--on-accent:#fff;
  --ht-edge:#d2d6db;--ht-rim:#ffffff;--ht-ink:#a5abb3;
  --ht-raised:0 2px 3px #2934430a,0 7px 15px #29344308,inset 0 1px 0 #fff;
  --ht-pressed:inset 0 1px 3px #29344313,0 1px 0 #fff;
  --ht-paper:#fcfcfd;--ht-paper-back:#e4e7eb;--ht-grid:#30343a0a;
  --ht-sidebar:#eeeff1;--ht-tag:#fbfbfbed;--ht-tag-fg:#30343a;
  --ht-red:var(--fg);--ht-green:var(--fg);--ht-violet:var(--fg);--ht-gold:var(--fg);--ht-blue:var(--fg);
  background:var(--bg);
}
html[data-theme="dark"] body.studio-shell:has(#pane-home:not([hidden])){
  --bg:#1b1c1f;--surf:#282a2e;--hole:#222428;--line:#41454c;
  --fg:#f1f2f4;--dim:#b2b8c1;--ph:#b2b8c1;
  --acc:#e7e9ed;--acc-d:#ffffff;--soft:#393d44;--on-accent:#24262a;
  --ht-edge:#464a52;--ht-rim:#ffffff16;--ht-ink:#727982;
  --ht-raised:0 2px 3px #00000024,0 7px 15px #00000017,inset 0 1px 0 #ffffff12;
  --ht-pressed:inset 0 2px 4px #00000033,0 1px 0 #ffffff09;
  --ht-paper:#292b30;--ht-paper-back:#24262b;--ht-grid:#ffffff09;
  --ht-sidebar:#202226;--ht-tag:#27292def;--ht-tag-fg:#f3f4f5;
}

.paba-brand-logo{display:block;width:148px;height:29px;flex:0 0 auto;color:inherit}
.studio-shell .hm-mobile-brand .paba-brand-logo{width:128px;height:25px}
.hm-footer .paba-brand-logo{width:112px;height:22px}
:where(body:has(#pane-home:not([hidden]))) .hm-sidebar{
  background:var(--ht-sidebar);border-right-color:var(--ht-edge);
  box-shadow:inset -1px 0 0 var(--ht-rim);
}
:where(body:has(#pane-home:not([hidden]))) .hm-brand{
  font-size:23px;font-weight:650;letter-spacing:0;
}
:where(body:has(#pane-home:not([hidden]))) .hm-new{
  border:1px solid var(--ht-edge);background:var(--surf);color:var(--fg);
  box-shadow:0 1px 2px #00000009,inset 0 1px 0 var(--ht-rim);
  transition:transform .16s,box-shadow .16s,border-color .16s,background-color .16s;
}
:where(body:has(#pane-home:not([hidden]))) .hm-new:hover{
  background:var(--hole);border-color:var(--ht-ink);
}
:where(body:has(#pane-home:not([hidden]))) .hm-new:active{
  transform:translateY(1px);box-shadow:var(--ht-pressed);
}
:where(body:has(#pane-home:not([hidden]))) .hm-nav a{
  position:relative;border:1px solid transparent;transition:background .16s,color .16s,box-shadow .16s;
}
:where(body:has(#pane-home:not([hidden]))) .hm-nav a:hover{background:var(--hole)}
:where(body:has(#pane-home:not([hidden]))) .hm-nav a[aria-current="page"]{
  background:var(--surf);border-color:var(--ht-edge);box-shadow:var(--ht-raised);color:var(--fg)!important;
}
:where(body:has(#pane-home:not([hidden]))) .hm-nav a[aria-current="page"]>.ui-icon{color:var(--acc)}
:where(body:has(#pane-home:not([hidden]))) .hm-nav a[aria-current="page"]::after{
  content:"";position:absolute;right:8px;top:50%;width:6px;height:6px;margin-top:-3px;
  border:1px solid var(--acc);border-radius:50% 40% 48% 35%;background:var(--acc);transform:rotate(-12deg);
}
:where(body:has(#pane-home:not([hidden]))) .hm-nav-divider{
  border-color:var(--ht-edge);box-shadow:0 1px 0 var(--ht-rim);
}
:where(body:has(#pane-home:not([hidden]))) .hm-nav-label{font-weight:550;color:var(--dim)}
:where(body:has(#pane-home:not([hidden]))) .hm-resume{
  border:1px solid var(--ht-edge);background:var(--surf);box-shadow:var(--ht-raised);border-radius:8px;
}
:where(body:has(#pane-home:not([hidden]))) .hm-resume:hover{border-color:var(--acc)}
:where(body:has(#pane-home:not([hidden]))) .hm-resume:active{box-shadow:var(--ht-pressed)}

body.studio-shell:has(#pane-home:not([hidden])) #app>header{background:var(--bg)}
body.studio-shell:has(#pane-home:not([hidden])) #app>header>.iconbtn,
body.studio-shell:has(#pane-home:not([hidden])) #guestlogin{
  border:1px solid var(--ht-edge);background:var(--surf);color:var(--fg);
  box-shadow:var(--ht-raised);border-radius:6px;
}
body.studio-shell:has(#pane-home:not([hidden])) #app>header>.iconbtn:hover,
body.studio-shell:has(#pane-home:not([hidden])) #guestlogin:hover{border-color:var(--ht-ink)}
body.studio-shell:has(#pane-home:not([hidden])) #app>header>.iconbtn:active,
body.studio-shell:has(#pane-home:not([hidden])) #guestlogin:active{box-shadow:var(--ht-pressed)}

/* The primary create control is a drafting surface; the little sheets carry the depth. */
#pane-home .hm-canvas-start{
  position:relative;isolation:isolate;overflow:hidden;border-color:var(--ht-edge);
  border-radius:8px;background-color:var(--ht-paper);
  background-image:linear-gradient(var(--ht-grid) 1px,transparent 1px),linear-gradient(90deg,var(--ht-grid) 1px,transparent 1px);
  background-size:24px 24px;box-shadow:inset 0 1px 0 var(--ht-rim),inset 0 -1px 0 var(--ht-rim);
  transition:border-color .18s,background-color .18s;
}
#pane-home .hm-canvas-start::before,#pane-home .hm-canvas-start::after{
  content:"";position:absolute;width:18px;height:18px;pointer-events:none;opacity:.6;
}
#pane-home .hm-canvas-start::before{top:14px;left:14px;border-top:1px solid var(--ht-ink);border-left:1px solid var(--ht-ink)}
#pane-home .hm-canvas-start::after{right:14px;bottom:14px;border-right:1px solid var(--ht-ink);border-bottom:1px solid var(--ht-ink)}
#pane-home .hm-canvas-start:hover{border-color:var(--acc)}
#pane-home .hm-canvas-plus{
  position:relative;isolation:isolate;width:66px;height:44px;margin:3px 0;
  border:1px solid var(--ht-edge);border-radius:6px;
  background:linear-gradient(165deg,var(--surf),var(--hole));color:var(--acc);box-shadow:var(--ht-raised);
  transition:transform .18s,box-shadow .18s;
}
#pane-home .hm-canvas-plus::before,#pane-home .hm-canvas-plus::after{
  content:"";position:absolute;inset:-4px 3px 3px -3px;z-index:-1;
  border:1px solid var(--ht-edge);border-radius:5px;background:var(--ht-paper-back);
  transform:rotate(-9deg);transform-origin:50% 100%;transition:transform .18s;pointer-events:none;
}
#pane-home .hm-canvas-plus::after{inset:0;transform:none;background:linear-gradient(165deg,var(--surf),var(--hole));box-shadow:inset 0 1px 0 var(--ht-rim)}
#pane-home .hm-canvas-plus>.ui-icon{width:23px;height:23px;transform:rotate(-6deg)}
#pane-home .hm-canvas-start:hover .hm-canvas-plus{transform:translateY(-2px) rotate(2deg);box-shadow:var(--ht-raised)}
#pane-home .hm-canvas-start:hover .hm-canvas-plus::before{transform:rotate(-13deg)}
#pane-home .hm-canvas-start:active .hm-canvas-plus{transform:translateY(1px);box-shadow:var(--ht-pressed)}
#pane-home .hm-canvas-copy{position:relative;font-weight:600}
#pane-home .hm-canvas-copy::after{
  content:"";position:absolute;left:4px;right:-2px;bottom:-6px;height:5px;
  border-bottom:2px solid var(--acc);border-radius:0 0 50% 30%;transform:rotate(-3deg);opacity:.45;
}

#pane-home .hm-tool-launchers>a{--ht-tool:var(--ht-red);color:var(--dim)!important}
#pane-home .hm-tool-launchers>a[href="#create/image"]{--ht-tool:var(--ht-green)}
#pane-home .hm-tool-launchers>a[href="#create/audio"]{--ht-tool:var(--ht-violet)}
#pane-home .hm-tool-launchers>a[href="#tools/script"]{--ht-tool:var(--ht-gold)}
#pane-home .hm-tool-launchers>a[href="#tools/director"]{--ht-tool:var(--ht-blue)}
#pane-home .hm-tool-launchers>a[href="#tools/character"]{--ht-tool:var(--ht-violet)}
#pane-home .hm-tool-launchers>a[href="#tools/edit"]{--ht-tool:var(--fg)}
#pane-home .hm-tool-launchers>a[href="#objects/studio"]{--ht-tool:var(--ht-green)}
#pane-home .hm-tool-launchers .hm-tool-icon{
  position:relative;border:1px solid var(--ht-edge);border-bottom-color:color-mix(in srgb,var(--ht-edge) 80%,var(--ht-ink));
  border-radius:8px;background:linear-gradient(160deg,var(--surf),color-mix(in srgb,var(--ht-tool) 5%,var(--surf)));
  color:var(--ht-tool);box-shadow:var(--ht-raised);transition:transform .16s,box-shadow .16s,border-color .16s;
}
#pane-home .hm-tool-launchers>a:hover{color:var(--fg)!important}
#pane-home .hm-tool-launchers>a:hover .hm-tool-icon{
  color:var(--ht-tool);border-color:color-mix(in srgb,var(--ht-tool) 55%,var(--ht-edge));transform:translateY(-2px);
}
#pane-home .hm-tool-launchers>a:active .hm-tool-icon{transform:translateY(1px);box-shadow:var(--ht-pressed)}
#pane-home .hm-tool-launchers .ui-icon{filter:drop-shadow(0 1px 0 var(--ht-rim))}

/* One pencil mark per section, with readable standard type throughout. */
#pane-home .hm-section-heading h2{display:flex;align-items:center;gap:9px;font-weight:650;color:var(--fg)}
#pane-home .hm-section-heading h2::before{
  content:"";display:block;flex:0 0 3px;width:3px;height:13px;background:var(--acc);
  border-radius:60% 30% 45% 20%;transform:rotate(9deg);opacity:.75;
}
#pane-home .hm-empty{color:var(--dim)}
#pane-home .hm-empty>.ui-icon{color:var(--ht-ink)}
#pane-home .hm-project{border-color:var(--ht-edge);background:var(--surf);box-shadow:var(--ht-raised)}
#pane-home .hm-project:hover{border-color:var(--acc)}
#pane-home .hm-project-cover{background:var(--hole);box-shadow:var(--ht-pressed)}
#pane-home .hm-project-actions{border-color:var(--ht-edge);box-shadow:var(--ht-raised)}
#pane-home .hm-feature-art,#pane-home .hm-show-art{
  border:3px solid var(--surf);outline:1px solid var(--ht-edge);outline-offset:-1px;
  box-shadow:0 2px 3px #00000008,0 5px 12px #0000000a;border-radius:7px;
}
#pane-home .hm-feature-art::after,#pane-home .hm-show-art::after{
  content:"";position:absolute;inset:0;border:1px solid #00000012;border-radius:4px;pointer-events:none;z-index:1;
}
#pane-home .hm-feature-tag,#pane-home .hm-show-tag{
  top:8px;left:8px;max-width:calc(100% - 16px);padding:3px 7px;
  background:var(--ht-tag);color:var(--ht-tag-fg);border:1px solid #ffffff25;
  border-radius:3px;box-shadow:0 1px 3px #00000012;backdrop-filter:blur(8px);font-weight:500;
}
#pane-home .hm-feature-label b{font-weight:550}
#pane-home .hm-feature-label>.ui-icon{color:var(--acc);opacity:.85}
#pane-home .hm-show-title{font-weight:550}
#pane-home .hm-show-arrow{
  background:var(--surf);color:var(--acc);border:1px solid var(--ht-edge);box-shadow:var(--ht-raised);
}
#pane-home .hm-categories>button{position:relative;border-bottom-color:transparent}
#pane-home .hm-categories>button[aria-pressed="true"]{color:var(--acc);font-weight:600}
#pane-home .hm-categories>button[aria-pressed="true"]::after{
  content:"";position:absolute;left:1px;right:0;bottom:0;height:5px;border-bottom:2px solid var(--acc);
  border-radius:0 0 50% 25%;transform:rotate(-3deg);opacity:.75;pointer-events:none;
}
#pane-home .hm-search{background:var(--hole);border-color:var(--ht-edge);box-shadow:var(--ht-pressed);border-radius:6px}
#pane-home .hm-search:focus-within{border-color:var(--acc);outline:2px solid var(--soft);outline-offset:1px}
#pane-home #hm-idea-form{background:var(--ht-paper);border-color:var(--ht-edge);box-shadow:var(--ht-pressed)}
#pane-home #hm-idea-form:focus-within{border-color:var(--acc)}
#pane-home .hm-create-submit{box-shadow:inset 0 1px 0 #ffffff25,0 2px 3px #0000000b}
#pane-home .hm-create-submit:disabled{box-shadow:none}
#pane-home .hm-create-modes>button[aria-pressed="true"]{box-shadow:inset 0 1px 0 var(--ht-rim);border:0}
#pane-home .hm-footer{border-color:var(--ht-edge);box-shadow:0 -1px 0 var(--ht-rim)}

@media(max-width:600px){
  body.studio-shell:has(#pane-home:not([hidden])) #app>header{background:var(--ht-sidebar);border-bottom-color:var(--ht-edge);box-shadow:inset 0 -1px 0 var(--ht-rim)}
  #pane-home .hm-canvas-start{background-size:20px 20px}
  #pane-home .hm-feature-tag,#pane-home .hm-show-tag{top:6px;left:6px;padding:2px 5px}
  #pane-home .hm-section-heading h2{gap:7px}
}
@media(max-width:380px){
  .studio-shell #app>header{padding-inline:12px;gap:6px}
  .studio-shell .hm-mobile-brand .paba-brand-logo{width:120px;height:24px}
}
@media(prefers-reduced-motion:reduce){
  #pane-home .hm-canvas-start:hover .hm-canvas-plus,#pane-home .hm-canvas-start:active .hm-canvas-plus,
  #pane-home .hm-tool-launchers>a:hover .hm-tool-icon,#pane-home .hm-tool-launchers>a:active .hm-tool-icon{transform:none}
  #pane-home .hm-canvas-start:hover .hm-canvas-plus::before{transform:rotate(-9deg)}
  :where(body:has(#pane-home:not([hidden]))) .hm-new:active{transform:none}
}