:root{
  color-scheme:dark;
  --bg:#0b1117;
  --surface:#101922;
  --surface-raised:#15212b;
  --line:#24343f;
  --text:#e9f1f2;
  --muted:#9eafb9;
  --faint:#748b97;
  --accent:#68dfd3;
  --accent-dark:#112f31;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none;
  line-height:1.5;
  font-size:14px;
  -webkit-font-smoothing:antialiased
}
*{
  box-sizing:border-box
}
html,body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--text)
}
body{
  background-image:radial-gradient(ellipse at 75% -15%,#18363c66,transparent 50%)
}
button,input,select{
  font:inherit
}
button,a,input,select{
  -webkit-tap-highlight-color:transparent
}
button{
  cursor:pointer
}
button,input,select{
  color:inherit
}
a{
  color:inherit;
  text-decoration:none
}
button:disabled{
  opacity:.38;
  cursor:not-allowed
}
[hidden]{
  display:none!important
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px
}
svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
p,h1,h2,h3{
  margin:0
}
button,a{
  touch-action:manipulation
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}
.skip-link{
  position:fixed;
  top:-80px;
  left:20px;
  padding:12px;
  background:var(--accent);
  color:var(--bg);
  z-index:20
}
.skip-link:focus{
  top:10px
}
.topbar{
  height:90px;
  max-width:1600px;
  margin:auto;
  padding:0 44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.brand{
  display:flex;
  gap:12px;
  align-items:center;
  font-size:25px;
  letter-spacing:-1px;
  font-weight:600
}
.brand-mark{
  display:grid;
  place-items:center;
  width:36px;
  height:42px;
  border:1px solid #537974;
  border-radius:5px;
  color:var(--accent);
  font-size:26px;
  font-weight:400
}
.brand-subtitle{
  display:block;
  font-size:9px;
  letter-spacing:3px;
  font-weight:500;
  color:var(--muted);
  margin-top:-4px
}
.topbar nav{
  display:flex;
  align-items:center;
  gap:30px
}
.back-link{
  font-size:12px;
  color:#bfd0d6
}
.back-link:hover,.page-footer a:hover{
  color:var(--accent)
}
.local-indicator{
  font-size:11px;
  color:var(--muted);
  display:flex;
  gap:8px;
  align-items:center
}
.local-indicator>span{
  height:5px;
  width:5px;
  background:var(--accent);
  border-radius:50%
}
main{
  max-width:1600px;
  margin:auto;
  padding:36px 44px 20px
}
.page-intro{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:28px
}
.eyebrow{
  display:block;
  color:var(--accent);
  font-size:9px;
  font-weight:600;
  letter-spacing:1.7px
}
.page-intro h1{
  font-size:clamp(25px,2.6vw,38px);
  font-weight:450;
  letter-spacing:-1.3px;
  margin-top:9px;
  line-height:1.18
}
.intro-copy{
  font-size:13px;
  color:var(--muted);
  margin-top:10px
}
.session-actions{
  display:flex;
  align-items:flex-end;
  flex-direction:column;
  gap:10px;
  flex-shrink:0
}
.ai-state{
  color:var(--muted);
  font-size:11px
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:36px;
  border:1px solid var(--line);
  background:var(--surface-raised);
  border-radius:5px;
  padding:7px 12px;
  font-size:11px;
  font-weight:550;
  white-space:nowrap
}
.button:hover:enabled,.button[href]:hover{
  background:#20333e;
  border-color:#49616c
}
.button.quiet{
  background:transparent;
  border-color:transparent;
  color:var(--muted)
}
.button.quiet:hover:enabled{
  color:var(--text);
  background:var(--surface-raised);
  border-color:var(--line)
}
.button.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#082525
}
.button.primary:hover:enabled{
  background:#99f3e9;
  border-color:#99f3e9
}
.button.selected{
  background:var(--accent-dark);
  border-color:#2d6564;
  color:var(--accent)
}
.panel{
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface);
  box-shadow:0 8px 40px #0000000f
}
.studio-layout{
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  gap:20px;
  align-items:stretch
}
.source-panel{
  padding:23px 18px;
  display:flex;
  flex-direction:column;
  min-width:0
}
.panel-heading{
  padding:0 3px 21px
}
.panel-heading h2{
  font-size:17px;
  font-weight:450;
  letter-spacing:-.4px;
  margin-top:8px
}
.source-button{
  display:flex;
  align-items:center;
  text-align:left;
  gap:11px;
  background:#14212b;
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--text);
  padding:15px 12px;
  width:100%
}
.source-button:hover:enabled{
  background:#1a2d37;
  border-color:#4b7479
}
.source-button>span:last-child{
  margin-left:auto;
  color:var(--faint);
  font-size:16px
}
.source-icon{
  display:flex;
  align-items:center;
  color:var(--accent);
  flex:0 0 24px
}
.source-icon svg{
  width:23px;
  height:23px
}
.source-button strong{
  font-weight:550;
  font-size:12px;
  display:block
}
.source-button small{
  font-size:10px;
  display:block;
  color:var(--muted);
  line-height:1.6;
  margin-top:4px
}
.input-note{
  color:var(--faint);
  font-size:10px;
  line-height:1.8;
  margin:9px 3px 19px
}
.privacy-note{
  display:flex;
  align-items:flex-start;
  gap:9px;
  color:var(--muted);
  font-size:10px;
  line-height:1.8;
  margin:24px 3px
}
.privacy-note svg{
  flex-shrink:0;
  width:15px;
  height:15px;
  margin-top:2px
}
.source-summary{
  margin-top:auto;
  border-top:1px solid var(--line);
  padding:20px 3px 0;
  overflow-wrap:anywhere
}
.source-summary .eyebrow{
  color:var(--faint);
  font-size:8px
}
.source-summary strong{
  display:block;
  font-size:12px;
  font-weight:500;
  margin:7px 0 4px
}
.source-summary>span{
  color:var(--muted);
  font-size:10px
}
.workspace{
  overflow:hidden;
  min-width:0;
  display:flex;
  flex-direction:column;
  scroll-margin-top:16px
}
.workspace-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:19px 23px
}
.workspace-head .eyebrow{
  font-size:8px;
  color:var(--faint)
}
.workspace-head h2{
  font-size:15px;
  font-weight:450;
  margin-top:5px;
  letter-spacing:-.2px
}
.icon-button{
  width:33px;
  min-height:33px;
  padding:7px;
  background:transparent
}
.icon-button svg{
  width:16px;
  height:16px
}
.canvas-toolbar{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
  min-height:54px;
  padding:8px 17px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#0e1720
}
.canvas-toolbar .button{
  min-height:31px;
  font-size:10px;
  padding:6px 9px
}
.color-control,.width-control{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 7px;
  color:var(--muted);
  font-size:10px;
  white-space:nowrap
}
.color-control input{
  width:24px;
  height:26px;
  padding:2px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface-raised);
  cursor:pointer
}
.width-control select{
  font-size:10px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:4px;
  padding:5px 2px
}
.toolbar-spacer{
  flex:1
}
.stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  background:#0a1219;
  min-height:365px;
  overflow:hidden
}
#board{
  display:block;
  max-width:100%;
  max-height:65vh;
  height:auto;
  width:auto;
  touch-action:none;
  cursor:crosshair;
  background:#0c1720
}
.stage[data-drawing="false"] #board{
  cursor:default
}
.empty-hint{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  pointer-events:none;
  text-align:center;
  padding:20px;
  background-image:linear-gradient(#26414d22 1px,transparent 1px),linear-gradient(90deg,#26414d22 1px,transparent 1px);
  background-size:36px 36px
}
.focus-symbol{
  width:76px;
  height:76px;
  position:relative;
  color:var(--accent);
  display:grid;
  place-items:center;
  margin-bottom:22px
}
.focus-symbol>span{
  position:absolute;
  width:18px;
  height:18px;
  border:1px solid #43706f
}
.focus-symbol>span:nth-child(1){
  top:0;
  left:0;
  border-right:0;
  border-bottom:0
}
.focus-symbol>span:nth-child(2){
  top:0;
  right:0;
  border-left:0;
  border-bottom:0
}
.focus-symbol>span:nth-child(3){
  bottom:0;
  left:0;
  border-right:0;
  border-top:0
}
.focus-symbol>span:nth-child(4){
  bottom:0;
  right:0;
  border-left:0;
  border-top:0
}
.focus-symbol svg{
  width:45px;
  height:45px;
  stroke-width:1.3;
  opacity:.75
}
.empty-hint h3{
  font-weight:400;
  letter-spacing:-.5px;
  font-size:23px;
  color:#d2e1e4
}
.empty-hint p{
  font-size:11px;
  margin-top:8px;
  color:var(--muted)
}
.empty-hint>span{
  font-size:8px;
  letter-spacing:1.6px;
  color:var(--faint);
  margin-top:29px
}
#camera-preview{
  display:block;
  width:100%;
  height:100%;
  max-height:65vh;
  object-fit:contain;
  background:#05080b
}
#pdf-preview{
  width:100%;
  height:64vh;
  min-height:390px;
  border:0;
  background:#202930
}
.drop-hint{
  position:absolute;
  inset:12px;
  border:2px dashed var(--accent);
  background:#123239ef;
  display:grid;
  place-items:center;
  color:var(--accent);
  font-size:18px;
  text-align:center;
  pointer-events:none;
  z-index:2
}
.media-controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 20px;
  border-top:1px solid var(--line);
  font-size:10px;
  color:var(--muted);
  flex-wrap:wrap
}
.media-controls>div{
  display:flex;
  gap:8px
}
.camera-live{
  display:flex;
  gap:8px;
  align-items:center
}
.camera-live>span[aria-hidden]{
  width:6px;
  height:6px;
  background:#edb16e;
  border-radius:50%
}
.workspace-footer{
  display:flex;
  align-items:flex-start;
  gap:15px;
  padding:13px 20px;
  border-top:1px solid var(--line);
  min-height:48px
}
.workspace-footer>span{
  font-size:8px;
  letter-spacing:1.2px;
  font-weight:600;
  color:var(--accent);
  line-height:20px;
  flex-shrink:0
}
.workspace-footer p{
  font-size:10px;
  color:var(--muted);
  line-height:20px
}
.workspace-footer p[data-error="true"]{
  color:#ffc5ab
}
.workspace:fullscreen{
  border:0;
  border-radius:0;
  width:100%;
  height:100%;
  background:var(--bg)
}
.workspace:fullscreen .stage{
  min-height:0
}
.workspace:fullscreen #board,.workspace:fullscreen #camera-preview{
  max-height:calc(100vh - 200px);
  max-width:100%
}
.workspace:fullscreen #pdf-preview{
  height:100%
}
.command-panel{
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  gap:20px;
  padding:23px 24px;
  margin-top:20px
}
.command-intro h2{
  font-size:16px;
  font-weight:450;
  letter-spacing:-.3px;
  margin-top:8px
}
.command-intro>p:last-child{
  font-size:10px;
  color:var(--muted);
  margin-top:7px
}
.command-area{
  min-width:0
}
.command-area form{
  display:flex;
  gap:8px
}
.command-area input{
  flex:1;
  min-width:0;
  border:1px solid var(--line);
  background:#0b151d;
  padding:11px 13px;
  border-radius:5px;
  font-size:12px
}
.command-area input::placeholder{
  color:var(--faint)
}
.command-examples{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:12px
}
.command-examples button{
  color:#b6c7ce;
  background:none;
  border:0;
  padding:0;
  font-size:10px;
  text-align:left
}
.command-examples button:hover:enabled{
  color:var(--accent)
}
.command-response{
  color:var(--muted);
  font-size:10px;
  margin-top:12px;
  line-height:1.8
}
.voice-note{
  color:var(--faint);
  font-size:9px;
  margin-top:6px
}
.next-section{
  margin-top:36px
}
.next-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:18px
}
.next-heading .eyebrow{
  color:var(--faint);
  font-size:8px
}
.next-heading h2{
  font-size:21px;
  font-weight:400;
  letter-spacing:-.5px;
  margin-top:7px
}
.next-heading>span{
  color:var(--faint);
  font-size:10px
}
.capability-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px
}
.capability-grid article{
  border-top:1px solid var(--line);
  padding:18px 0 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.capability-number{
  font-size:10px;
  font-family:ui-monospace,monospace;
  color:var(--accent);
  margin-bottom:11px
}
.capability-grid h3{
  font-size:14px;
  font-weight:500;
  margin-bottom:7px
}
.capability-grid p{
  color:var(--muted);
  font-size:11px;
  line-height:1.7;
  max-width:350px;
  margin-bottom:15px
}
.prerequisite{
  font-size:9px;
  border:1px solid var(--line);
  padding:5px 8px;
  border-radius:4px;
  color:var(--faint);
  margin-top:auto
}
.page-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-top:1px solid var(--line);
  margin-top:36px;
  padding:19px 0 3px;
  color:var(--faint);
  font-size:9px
}
.page-footer>span{
  font-size:8px;
  letter-spacing:1.6px
}
.page-footer a{
  color:var(--muted)
}
.noscript{
  padding:20px;
  text-align:center;
  background:#342019;
  color:#ffd8c6
}
@media(min-width:1500px){
  .studio-layout{
    grid-template-columns:290px minmax(0,1fr)
  }
  .stage{
    min-height:460px
  }
}
@media(max-width:1100px){
  .topbar{
    padding:0 25px
  }
  main{
    padding:30px 25px 18px
  }
  .studio-layout{
    grid-template-columns:240px minmax(0,1fr);
    gap:15px
  }
  .source-panel{
    padding:20px 13px
  }
  .source-button{
    padding:13px 9px;
    gap:9px
  }
  .source-button small{
    font-size:9px
  }
  .canvas-toolbar{
    gap:4px;
    padding:8px 11px
  }
  .toolbar-spacer{
    display:none
  }
  .color-control,.width-control{
    margin:0 3px
  }
  .command-panel{
    grid-template-columns:225px minmax(0,1fr)
  }
  .workspace-head{
    padding:18px
  }
  .stage{
    min-height:360px
  }
}
@media(max-width:800px){
  .topbar{
    height:76px
  }
  .local-indicator{
    display:none
  }
  .page-intro{
    align-items:flex-start
  }
  .page-intro h1{
    font-size:29px
  }
  .intro-copy{
    font-size:12px
  }
  .studio-layout{
    grid-template-columns:1fr
  }
  .source-panel{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:11px;
    padding:15px
  }
  .panel-heading{
    grid-column:1/-1;
    padding:0
  }
  .panel-heading h2{
    display:none
  }
  .source-button{
    align-items:flex-start;
    gap:8px
  }
  .source-icon{
    flex-basis:20px
  }
  .source-icon svg{
    width:19px;
    height:19px
  }
  .source-button>span:last-child{
    display:none
  }
  .input-note,.privacy-note,.source-summary{
    display:none
  }
  .source-button strong{
    font-size:11px
  }
  .source-button small{
    font-size:9px
  }
  .stage{
    min-height:340px
  }
  #board{
    max-height:65vh
  }
  .command-panel{
    grid-template-columns:1fr;
    gap:18px
  }
  .command-intro{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px
  }
  .command-intro h2{
    margin:0
  }
  .command-intro>p:last-child{
    width:100%;
    margin:0
  }
  .capability-grid{
    gap:20px
  }
  .page-footer p{
    display:none
  }
}
@media(max-width:540px){
  .topbar{
    padding:0 18px
  }
  main{
    padding:25px 14px 15px
  }
  .brand{
    font-size:23px
  }
  .brand-mark{
    width:32px;
    height:36px;
    font-size:23px
  }
  .page-intro{
    flex-direction:column;
    gap:16px;
    margin-bottom:19px
  }
  .page-intro h1{
    font-size:27px;
    letter-spacing:-.9px
  }
  .session-actions{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:12px
  }
  .session-actions .button{
    min-height:30px;
    font-size:10px;
    padding:5px 0
  }
  .source-panel{
    padding:12px;
    gap:7px
  }
  .source-button{
    display:block;
    padding:11px 7px
  }
  .source-icon{
    margin-bottom:7px
  }
  .source-button strong{
    font-size:10px
  }
  .source-button small{
    font-size:8px;
    line-height:1.7
  }
  .workspace-head{
    padding:15px
  }
  .workspace-head h2{
    font-size:14px
  }
  .canvas-toolbar{
    gap:5px;
    padding:9px
  }
  .canvas-toolbar .button{
    padding:6px 7px;
    font-size:9px
  }
  .color-control,.width-control{
    font-size:9px;
    gap:4px
  }
  .stage{
    min-height:300px
  }
  .empty-hint h3{
    font-size:20px
  }
  .empty-hint p{
    font-size:10px;
    max-width:240px
  }
  .empty-hint>span{
    font-size:7px;
    letter-spacing:1.1px
  }
  .focus-symbol{
    width:57px;
    height:57px;
    margin-bottom:20px
  }
  .focus-symbol svg{
    width:35px;
    height:35px
  }
  .workspace-footer{
    padding:12px;
    gap:10px
  }
  .media-controls{
    padding:12px
  }
  .media-controls .button{
    font-size:10px
  }
  .command-panel{
    padding:18px 15px
  }
  .command-intro{
    display:block
  }
  .command-intro h2{
    margin-top:7px
  }
  .command-intro>p:last-child{
    margin-top:5px
  }
  .command-area input{
    font-size:11px;
    padding:10px
  }
  .command-area form .button{
    font-size:10px;
    padding:8px
  }
  .command-examples{
    gap:14px
  }
  .next-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:8px
  }
  .next-heading h2{
    font-size:21px
  }
  .capability-grid{
    grid-template-columns:1fr;
    gap:22px
  }
  .capability-grid article{
    position:relative;
    padding:15px 0 0 30px
  }
  .capability-number{
    position:absolute;
    left:0;
    top:17px
  }
  .capability-grid p{
    max-width:none;
    margin-bottom:10px
  }
  .page-footer{
    margin-top:28px
  }
  .page-footer>span{
    font-size:7px;
    letter-spacing:1px
  }
}
@media(prefers-reduced-motion:reduce){
  *{
    scroll-behavior:auto!important
  }
}